HTML文件上传的技巧有哪些

本篇内容介绍了“HTML文件上传的技巧有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！我们可以将input 类型指定为file，以在Web应用程序中使用文件上传功能。input filte 提供按钮上传一个或多个文件。 默认情况下，它使用操作系统的本机文件浏览器上传单个文件。成功上传后，File API 使得可以使用简单的 JS 代码读取File对象。 要读取File对象，我们需要监听 change事件。首先，通过id获取文件上传的实例:然后添加一个change 事件侦听器，以在上传完成后读取文件对象， 我们从event.target.files属性获取上传的文件信息：在控制台中观察输出结果，这里关注一下FileList数组和File对象，该对象具有有关上传文件的所有元数据信息。
如果我们想上传多个文件，需要在标签上添加 mult免费云主机、域名iple 属性：现在，我们可以上传多个文件了，以前面事例为基础，选择多个文件上传后，观察一下控制台的变化：
每当我们上传文件时，File对象都有元数据信息，例如file name，size，last update time，type 等等。这些信息对于进一步的验证和特殊处理很有用。下面是单个文件上传的输出结果：
我们可以使用accept属性来限制要上载的文件的类型，如果只想上传的文件格式是 .jpg，.png 时，可以这么做：在上面的代码中，只能选择后缀是.jpg和.png的文件。
成功上传文件后显示文件内容，站在用户的角度上，如果上传之后，没有一个预览的，就很奇怪也不体贴。我们可以使用FileReader对象将文件转换为二进制字符串。 然后添加load 事件侦听器，以在成功上传文件时获取二进制字符串。
如果用户上传图片过大，为了不让服务器有压力，我们需要限制图片的大小，下面是允许用户上传小于 1M 的图片，如果大于 1M 将上传失败。
更好的用户体验是让用户知道文件上传进度，前面我们用过了FileReader以及读取和加载文件的事件。FileReader还有一个progress 事件，表示当前上传进度，配合HTML5的progress标签，我们来模拟一下文件的上传进度。
我们可以上传整个目录吗?嗯，这是可能的，但有一些限制。有一个叫做webkitdirectory的非标准属性(目前只有谷歌浏览器还有Microsoft Edge支持按照文件夹进行上传)，它允许我们上传整个目录。用户必须需要确认才能上传目录用户单击“上传”按钮后，就会进行上传。 这里要注意的重要一点。 FileList数组将以平面结构的形式包含有关上载目录中所有文件的信息。 对于每个File对象，webkitRelativePath属性表示目录路径。例如，上传一个主目录及其下的其他文件夹和文件：现在，File 对象将将webkitRelativePath填充为：
不支持文件上传的拖拽就有点 low 了，不是吗?我们来看看如何通过几个简单的步骤实现这一点。首先，创建一个拖放区域和一个可选的区域来显示上传的文件内容。通过它们各自的ID获取dropzone和content 区域。添加一个dragover 事件处理程序，以显示将要复制的内容的效果:接下来，我们需要一个drop事件监听器来处理。
有一个特殊的方法叫做URL.createobjecturl()，用于从文件中创建唯一的URL。还可以使用URL.revokeObjectURL()方法来释放它。“HTML文件上传的技巧有哪些”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注云技术网站，小编将为大家输出更多高质量的实用文章！

相关推荐: JavaScript中如何深入理解this

JavaScript中如何深入理解this，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。定义this是函数运行时自动生成的内部对象，即调用函数的那个对象。（不一定很准确的定义，但还算通俗易懂） 在…