介绍上传文件的功能可以说是项目中经常出现的需求。从在社交媒体上上传照片到在求职网站上发布简历，文件上传无处不在。在本文中，我们将讨论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('files',files);});观察控制台的输出，这里看一下FileList数组和File对象，里面有上传文件的所有元数据信息。如果你看到这里有点激动，可以把玩CodePen，地址：https://codepen.io/atapas/pen/rNLOyRm2。多文件上传如果我们要上传多个文件，需要在标签上加上multiple属性：现在，我们可以上传多个文件了。以前面的例子为基础，选择多个文件上传后，观察控制台的变化：看到这里有点小激动的，可以玩玩CodePen，地址：https://codepen.io/atapas/pen/MWeamYp3。理解文件元数据每当我们上传文件时，File对象都有元数据信息，例如文件名、大小、最后更新时间、类型等。这些信息对于进一步验证和特殊处理很有用。constfileUploader=document.getElementById('file-uploader');//监听变化并读取元数据fileUploader.addEventListener('change',(event)=>{//获取文件列表数组constfiles=event.target.files;//遍历并获取(constfileofffiles){constname=file.name;consttype=file.type?file.type:'NA';constsize=file.size;constlastModified=file.lastModified;console.log({file,name,类型,大小,lastModified});}});下面是单个文件上传的输出：如果看到这里有点小激动，可以玩玩CodePen，地址：https://codepen.io/atapas/pen/gOMaRJv4。理解accept属性我们可以使用accept属性来限制上传文件的类型。如果只想上传文件格式为.jpg、.png，可以这样做：只能选择后缀为.jpg和.png的文件。如果你看到这里有点激动，可以在地址：https://codepen.io/atapas/pen/OJXymRP5玩玩CodePen。管理文件内容文件上传成功后，会显示文件内容，站在用户的角度，如果上传后没有预览，很奇怪，很不体贴。我们可以使用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/zYBvdjZ6。验证文件大小如果用户上传的图片太大，为了不让服务器有压力，我们需要限制图片的大小，下面是允许用户上传小于1M的图片，如果大于1M，上传会失败。fileUploader.addEventListener('change',(event)=>{//Readthefilesizeconstfile=event.target.files[0];constsize=file.size;letmsg='';//检查文件大小是否大于1MBif(size>1024*1024){msg=`允许的文件大小为1MB。Thefileyouaretryingtouploadisof${returnFileSize(size)}`;}else{msg=`${returnFileSize(size)}文件已成功上传。`;}feedback.innerHTML=msg;});如果你看到这里有点激动，可以把玩CodePen，地址：https://codepen.io/atapas/pen/pobjMKv7。显示文件上传进度更好的用户体验是让用户知道文件上传进度。前面我们用到了FileReader和读取、加载文件的事件。constreader=newFileReader();FileReader还有一个progress事件，表示当前上传进度。使用HTML5progress标签，让我们模拟文件上传进度。reader.addEventListener('progress',(event)=>{if(event.loaded&&event.total){//计算完成百分比constpercent=(event.loaded/event.total)*100;//将值绑定到`progress`labelprogress.value=percent;}});如果你看到这里有点激动，想便宜玩，可以玩CodePen，地址：https://codepen.io/atapas/pen/eYzpwYj8。如何上传目录上传？我们可以上传整个目录吗？好吧，这是可能的，但有一些限制。有一个非标准属性叫做webkitdirectory（目前只有GoogleChrome和MicrosoftEdge支持按文件夹上传），它允许我们上传整个目录。目前只有谷歌浏览器和微软Edge支持按文件夹上传。具体可以看网页版百度云盘的上传按钮。在Firefox下，它支持按文件上传，而在Google和Edge下，它会给用户提供一个下拉菜单，让用户选择是按文件上传还是按文件夹上传。用户上传目录前必须确认用户点击“上传”按钮后，将进行上传。这里需要注意的重要一点。FileList数组将以平面结构包含有关上传目录中所有文件的信息。对于每个File对象，webkitRelativePath属性表示目录路径。比如上传一个主目录及其下的其他文件夹和文件：现在，File对象会填充webkitRelativePath为：看到这里，有点小激动，想玩玩，可以玩玩CodePen，地址：https://codepen.io/atapas/pen/dyXYRKp9。拖拽上传不支持文件上传的拖拽有点low是不是？让我们看看如何通过几个简单的步骤来做到这一点。首先，创建一个拖放区和一个可选区来显示上传的文件内容。

Drag&DropanImage