上传文件的能力是许多Web和移动应用的关键需求，从将照片上传到社交媒体上到将简历发布到工作门户网站上，文件上传无处不在。
作为一名Web开发人员，我们一定知道HTML提供了原生文件上传的支持，并借助于JavaScript的一点帮助。在HTML5中，File API被添加到DOM中。利用它，我们可以读取 FileList 和其中的 File 对象，这就解决了文件的多种用例，即在本地加载文件或通过网络发送到进行处理等。
在本文中，我们将讨论HTML文件上传支持的10种用法，希望你觉得它有用。
在任何时候，如果您想使用这些文件上传功能，都可以在这里找到：
该演示的源代码在我的Github存储库中，?请随时关注我，并通过示例不断更新代码，如果您觉得有用，请给一个?。
我们可以将输入类型指定为 file，以在Web应用程序中使用文件上传器功能。
输入文件类型使用户可以通过按钮上传一个或多个文件，默认情况下，它允许使用操作系统的本地文件浏览器上传单个文件。
上传成功后，File API 可以使用简单的JavaScript代码读取 File 对象。要读取 File 对象，我们需要监听文件上传器的 change 事件。
首先，通过ID获取文件上传器实例
然后添加一个 change 事件侦听器，以在上传完成后读取文件对象，我们从 event.target.files 属性获取上传的文件信息。
在浏览器控制台中观察输出，注意 FileList 数组中的 File 对象拥有上传文件的所有元数据信息。
下面是相同示例的代码页，供您进一步研究
我们可以一次上传多个文件。为此，我们只需要在输入文件标签中添加一个名为 multiple 的属性即可。
现在，文件浏览器将允许您上传一个或多个要上传的文件。就像前面的例子一样，你可以添加一个 change 事件处理程序来捕获上传文件的信息。您是否注意到 FileList 是一个数组？对，对于多个文件上传，数组将具有以下信息：
下面是CodePen链接，用于探索多个文件上传。
每当我们上传一个文件时，File 对象都有元数据信息，如文件名、大小、最后更新时间、类型等，此信息对于进一步的验证和决策很有用。
这是单个文件上传的输出：
使用此CodePen进行进一步探索
我们可以使用 accept 属性来限制要上传的文件的类型，您可能希望在用户上传个人资料图片时，只显示允许浏览png格式图片类型。
在上面的代码中，文件浏览器将只允许扩展名为 jpg 和 png 的文件。
请注意，在这种情况下，文件浏览器会自动将文件选择类型设置为自定义而不是全部。但是，如果需要，您始终可以将其更改回所有文件。
使用此CodePen探索 accept 属性
您可以在成功上传文件后显示文件内容。对于个人资料图片，如果上传后不立即向用户展示上传的图片，会造成混乱。
我们可以使用 FileReader 对象将文件转换为二进制字符串。然后添加 load 事件侦听器，以在成功上传文件时获取二进制字符串。
尝试在下面的CodePen中选择一个图像文件，然后查看其渲染。
如我们所见，我们可以读取文件的大小元数据，实际上可以将其用于文件大小验证，您可能允许用户上传最大1MB的图像文件。让我们看看如何实现这一目标。
尝试上传不同大小的文件，以查看验证的工作原理
更好的可用性是让你的用户知道文件上传的进程。现在，我们知道了 FileReader 和读取和加载文件的事件。
FileReader 有另一个事件，称为进度(progress)，知道已加载了多少。我们可以使用HTML5的 progress 标签来创建带有此信息的进度栏。
不如你试着上传一个大一点的文件，看看下面的CodePen中的进度条工作情况如何？试试吧。
我们可以上传整个目录吗？好吧，这是可能的，但有一些限制。有一个叫做 webkitdirectory 的非标准属性（至少在写这篇文章的时候是这样），允许我们上传整个目录。
您可以将此属性指定为
这将允许您选择一个文件夹（又名目录）
用户必须提供确认信息才能上传目录，
用户单击“Upload”按钮后，就会进行上传。这里要注意的重要一点：FileList 数组将以平面结构的形式包含有关上载目录中所有文件的信息。但关键是，对于每个 File 对象，webkitRelativePath 属性都会有目录路径。
例如，让我们考虑一个 main 目录及其下的其他文件夹和文件，
现在，File 对象将将 webkitRelativePath 填充为
您可以使用它在您选择的任何UI结构中呈现文件夹和文件。使用此CodePen进行进一步探索。
不支持拖放功能进行文件上传是一种古老的方式，不是吗？让我们看看如何通过几个简单的步骤来实现这一目标。
首先，创建一个放置区和一个可选的区域以显示上传的文件内容。我们将使用图像作为文件拖放到此处。
通过它们各自的ID获取拖拽和内容区域。
添加一个 dragover 事件处理程序，以显示将要复制的内容的效果，
接下来，定义放置图像时我们要做什么，我们将需要一个 drop 事件监听器来处理。
尝试在下面的CodePen示例中拖放图像文件，并查看其工作原理，不要忘记查看代码以渲染拖放的图像。
有一个称为 URL.createObjectURL() 的特殊方法，可以从文件创建唯一的URL，您也可以使用 URL.revokeObjectURL() 方法释放它。
对象URL的简单用法是：
使用此CodePen可以进一步浏览对象URL。提示：将此方法与前面#5中提到的方法进行比较。
很多时候，原生HTML功能足以让我们处理手中的用例。我发现，文件上传默认情况下提供了许多不错的选择。
