html网页上传10个对web开辟人员有效的HTML文件上传技能

<inputtype="file"id="file-uploader">

input filte 供应按钮上传一个或多个文件。
默认情形下，它利用操作系统的本机文件浏览器上传单个文件。
成功上传后，File API 使得可以利用大略的 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/rNLOyRm

如果我们想上传多个文件，须要在标签上添加 multiple 属性：

<inputtype="file"id="file-uploader"multiple/>

现在，我们可以上传多个文件了，以前面事例为根本，选择多个文件上传后，不雅观察一下掌握台的变革：

如果大家看到这里，有点激动，想手贱一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/MWeamYp

每当我们上传文件时，File工具都有元数据信息，例如file name，size，last update time，type 等等。
这些信息对付进一步的验证和分外处理很有用。

constfileUploader=document.getElementById('file-uploader');//听更change件并读取元数据fileUploader.addEventListener('change',(event)=>{//获取文件列表数组constfiles=event.target.files;//遍历并获取元数据for(constfileoffiles){constname=file.name;consttype=file.type?file.type:'NA';constsize=file.size;constlastModified=file.lastModified;console.log({file,name,type,size,lastModified});}});

下面是单个文件上传的输出结果：

如果大家看到这里，有点激动，想手贱一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/gOMaRJv

我们可以利用accept属性来限定要上载的文件的类型，如果只想上传的文件格式是 .jpg，.png 时，可以这么做：

<inputtype="file"id="file-uploader"accept=".jpg,.png"multiple>

在上面的代码中，只能选择后缀是.jpg和.png的文件。

如果大家看到这里，有点激动，想手贱一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/OJXymRP

成功上传文件后显示文件内容，站在用户的角度上，如果上传之后，没有一个预览的，就很奇怪也不谅解。

我们可以利用FileReader工具将文件转换为二进制字符串。
然后添加load 事宜侦听器，以在成功上传文件时获取二进制字符串。

//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/zYBvdjZ

如果用户上传图片过大，为了不让做事器有压力，我们须要限定图片的大小，下面是许可用户上传小于 1M 的图片，如果大于 1M 将上传失落败。

fileUploader.addEventListener('change',(event)=>{//Readthefilesizeconstfile=event.target.files[0];constsize=file.size;letmsg='';//检讨文件大小是否大于1MBif(size>10241024){msg=`<span style="color:red;">Theallowedfilesizeis1MB.Thefileyouaretryingtouploadisof${returnFileSize(size)}</span>`;}else{msg=`<span style="color:green;">A${returnFileSize(size)}filehasbeenuploadedsuccessfully.</span>`;}feedback.innerHTML=msg;});

如果大家看到这里，有点激动，想手贱一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/pobjMKv

更好的用户体验是让用户知道文件上传进度，前面我们用过了FileReader以及读取和加载文件的事宜。

constreader=newFileReader();

FileReader还有一个progress 事宜，表示当前上传进度，合营HTML5的progress标签，我们来仿照一下文件的上传进度。

reader.addEventListener('progress',(event)=>{if(event.loaded&&event.total){//打算完成百分比constpercent=(event.loaded/event.total)100;//将值绑定到`progress`标签progress.value=percent;}});

如果大家看到这里，有点激动，想手贱一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/eYzpwYj

我们可以上传全体目录吗?嗯，这是可能的，但有一些限定。
有一个叫做webkitdirectory的非标准属性(目前只有谷歌浏览器还有Microsoft Edge支持按照文件夹进行上传)，它许可我们上传全体目录。

目前只有谷歌浏览器还有Microsoft Edge支持按照文件夹进行上传，详细可以看下百度云盘的网页版的上传按钮，在火狐下就支持按照文件进行上传，而在谷歌和Edge下，就会给用户供应一个下拉，让用户选择是根据文件进行上传还是根据文件夹进行上传。

<inputtype="file"id="file-uploader"webkitdirectory/>

用户必须须要确认才能上传目录

用户单击“上传”按钮后，就会进行上传。
这里要把稳的主要一点。
FileList数组将以平面构造的形式包含有关上载目录中所有文件的信息。
对付每个File工具，webkitRelativePath属性表示目录路径。

例如，上传一个主目录及其下的其他文件夹和文件：

现在，File 工具将将webkitRelativePath添补为：

如果大家看到这里，有点激动，想手贱一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/dyXYRKp

不支持文件上传的拖拽就有点 low 了，不是吗?我们来看看如何通过几个大略的步骤实现这一点。

首先，创建一个拖放区域和一个可选的区域来显示上传的文件内容。

<divid="container"><h1>Drag&DropanImage</h1><divid="drop-zone">DROPHERE</div><divid="content">Yourimagetoappearhere..</div></div>

通过它们各自的ID获取dropzone和content 区域。

constdropZone=document.getElementById('drop-zone');constcontent=document.getElementById('content');

添加一个dragover 事宜处理程序，以显示将要复制的内容的效果:

dropZone.addEventListener('dragover',event=>{event.stopPropagation();event.preventDefault();event.dataTransfer.dropEffect='copy';});

接下来，我们须要一个drop事宜监听器来处理。

dropZone.addEventListener('drop',event=>{//Getthefilesconstfiles=event.dataTransfer.files;});

如果大家看到这里，有点激动，想手贱一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/ExyVoXN

有一个分外的方法叫做URL.createobjecturl()，用于从文件中创建唯一的URL。
还可以利用URL.revokeObjectURL()方法来开释它。

URL.revokeObjectURL() 静态方法用来开释一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 工具。
当你结束利用某个 URL 工具之后，该当通过调用这个方法来让浏览器知道不用在内存中连续保留对这个文件的引用了。

fileUploader.addEventListener('change',(event)=>{constfiles=event.target.files;constfile=files[0];constimg=document.createElement('img');imageGrid.appendChild(img);img.src=URL.createObjectURL(file);img.alt=file.name;});

如果大家看到这里，有点激动，想手贱一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/BazzaoN

无论何时，如果你还想学习本文涉及的一些知识，你可以在这里考试测验。

https://html-file-upload.netlify.app/