作者：TapasAdhikary译者：前端小智来源：dev喜欢再看一遍，养成习惯之前好评文章的分类也整理了我的很多文档和教程材料。欢迎来到星和完美。面试时可参考考点复习。我希望我们能在一起。最近开源了一个Vue组件，但是还不够完善。欢迎大家一起完善，也希望大家能给个star支持一下。谢谢。github地址：https://github.com/qq44924588...介绍上传文件的功能可以说是项目的频繁需求。从在社交媒体上上传照片到在求职网站上发布简历，文件上传无处不在。在本文中，我们将讨论HTML文件上传支持的10个用法，希望对您有所帮助。1.单个文件上传我们可以指定输入类型为文件来使用web应用中的文件上传功能。输入过滤器提供一个按钮来上传一个或多个文件。默认情况下，它使用操作系统的本机文件浏览器上传单个文件。上传成功后，FileAPI可以使用简单的JS代码读取File对象。要读取File对象，我们需要监听change事件。首先通过id获取上传文件的实例：constfileUploader=document.getElementById('file-uploader');然后添加一个change事件监听器来读取上传完成后的文件对象，我们从event.target.files属性中获取上传的文件信息：fileUploader.addEventListener('change',(event)=>{constfiles=event.target.files;console.log('文件',文件);});观察控制台中的输出，这里是FileList数组和File对象，其中包含有关上传文件的所有元数据信息。如果看到这里有点激动，可以玩玩CodePen，地址：https://codepen.io/atapas/pen...2.多文件上传如果我们要上传多个文件，我们需要在标签中添加multiple属性：现在，我们可以上传多个文件了。在前面的例子的基础上，选择多个文件上传后，观察控制台变化：如果看到这个有点激动，想玩玩，可以用CodePen玩玩，地址：https://codepen.io/atapas/pen...3.了解文件元数据每当我们上传文件时，文件对象都有元数据信息，比如文件名、大小、最后更新时间、类型等等。此信息可用于进一步验证和特殊处理。constfileUploader=document.getElementById('file-uploader');//监听变化并读取元数据fileUploader.addEventListener('change',(event)=>{//获取文件列表数组constfiles=event.target.files;//遍历并获取元数据(constfileoffiles){constname=file.name;consttype=file.type?file.type:'NA';constsize=file.size;constlastModified=file.lastModified;console.log({文件,名称,类型,大小,lastModified});}});下面是单个文件上传的输出：如果看到这里有点激动，可以玩玩CodePen，地址：https://codepen.io/atapas/pen...4.理解accept属性我们可以使用accept属性来限制要上传的文件类型。如果要上传的文件格式是.jpg,.png,可以这样做：您只能选择.jpg和.png文件的后缀。如果看到这里有点激动，可以玩玩CodePen，地址：https://codepen.io/atapas/pen...五、管理文件内容文件上传成功后，显示文件内容,而网站站在用户的角度来看，如果上传后没有预览，就很奇怪，很不体贴。我们可以使用FileReader对象将文件转换为二进制字符串。然后添加一个加载事件监听器来获取文件上传成功时的二进制字符串。//FileReader实例constreader=newFileReader();fileUploader.addEventListener('change',(event)=>{constfiles=event.target.files;constfile=files[0];reader.readAsDataURL(file);reader.addEventListener('load',(event)=>{constimg=document.createElement('img');imageGrid.appendChild(img);img.src=event.target.result;img.alt=file.name;});});如果看到这里有点激动，可以玩玩CodePen，地址：https://codepen.io/atapas/pen...6.验证文件大小，如果用户上传的图片太大。为了不给服务器造成压力，我们需要限制图片的大小。下面是允许用户上传小于1M的图片。如果大于1M，上传会失败。fileUploader.addEventListener('change',(event)=>{//读取文件大小constfile=event.target.files[0];constsize=file.size;letmsg='';//检查文件大小Isitgreaterthan1MBif(size>1024*1024){msg=`允许的文件大小为1MB。您尝试上传的文件为${returnFileSize(size)}}}else{msg=`${returnFileSize(size)}文件已成功上传。`;}feedback.innerHTML=msg;});如果看到这里有点激动，可以玩玩CodePen，地址：https://codepen.io/atapas/pen...7.显示文件上传进度。用户知道文件上传进度。前面我们用到了FileReader和读取、加载文件的事件。constreader=newFileReader();FileReader还有一个progress事件，表示当前的上传进度。使用HTML5progress标签，让我们模拟文件上传进度。reader.addEventListener('progress',(event)=>{if(event.loaded&&event.total){//计算完成百分比constpercent=(event.loaded/event.total)*100;//绑定value设置为`progress`标签progress.value=percent;}});如果你看到这里有点激动，可以玩玩CodePen，地址：https://codepen.io/atapas/pen...8.如何上传目录上传？我们可以上传整个目录吗？好吧，这是可能的，但有一些限制。有一个非标准属性叫做webkitdirectory（目前只有GoogleChrome和MicrosoftEdge支持按文件夹上传），它允许我们上传整个目录。目前只有谷歌浏览器和微软Edge支持按文件夹上传。具体可以看网页版百度云盘的上传按钮。在Firefox下，它支持按文件上传，而在Google和Edge下，它会给用户提供一个下拉菜单，让用户选择是按文件上传还是按文件夹上传。上传目录需要用户确认用户点击“上传”按钮后，才会进行上传。这里需要注意的重要一点。FileList数组将以平面结构包含有关上传目录中所有文件的信息。对于每个File对象，webkitRelativePath属性表示目录路径。例如上传一个主目录和它下面的其他文件夹和文件：现在，File对象将填充webkitRelativePath为：如果你看到这个有点兴奋，想玩一玩，你可以玩CodePen，地址:https://codepen.io/atapas/pen...9.拖拽上传不支持文件上传的拖拽有点low是不是？让我们看看如何通过几个简单的步骤来做到这一点。首先，创建一个拖放区和一个可选区来显示上传的文件内容。

拖放图像