在HTML5之前，通过<input type="file">一次只能上传一个文件，大部分多文件上传都是通过flash实现得（听说得，我没用过），但是有了HTML5，多文件上传变得非常简单，并且可以本地预览。之前写过一个模仿QQ风格的移动端表单，支持多文件上传（图片），并且可以本地预览。已放在GitHub[感兴趣的点这里]，没有维护，对它的外观不要介意。
多文件上传
说了这么多，多文件上传要怎么实现呢？
<input type="file“ multiple >
只要加了multiple 属性，该input就支持多文件上传了，但是我们要怎么拿到上传的文件呢？
HTML5提供了相应的FileList对象，file对象有相应的属性，如name 、type、lastModifiedDate. 看个代码就明白了
<input type="file" id="upload" multiple >
<script>
var Upload=document.getElementById("upload");
var formData=new FormData(); //通过FormData对象可以组装一组用 [XMLHttpRequest]发送请求的键/值对,它可以更灵活方便的发送表单数据。
Upload.onchange=function(){ //onchange在你选择完文件时触发
var fileList=Upload.files ; //通过input的files属性获得fileList
for(let i=0;i<fileList.length;i++)
{
var file=fileList[i];
//比如在这里可以检查文件类型是不是图片
if(!/image\/w+/.test(file.type))
{
alert("请上传图片文件！”)；
return ;
}
formData.append("file"+i,file); //key:"file"+i,value:file,然后就可以把formData post到后台了
console.log(file.name+file.lastModifiedDate);
}
}
</script>
效果如图
image.png
但是要注意，多文件上传是指你可以一次性添加多个文件，但是如果你添加了一个文件后，再次打开添加，之前的就被清空了，如果场景需要多次添加，可以每次把相关信息自己记下来，然后自己提示用户已添加的文件。（看到这里，可能有的人说既然这样，HTML5多文件上传有什么意义，我本来就可以这样一个个记下来再上传，但是这个用户体验很不好，试想你微信发朋友圈，添加九张图片，一次性添加好，还是一张张加好呢？或者你添加了几个文件后，已经关了，但是突然发现漏掉一个文件，你不总能再把之前的重新再上传一遍吧，所以每上传一个文件，把它记下来是很有必要的）而且时候我们不一定添加的都是同类型文件，所以一次性添加多个文件不是很方便。
本地预览，以图片为例
本地预览主要依赖FileReader对象，FileReader对象用于把文件读入内存
FileReader 对象的方法和事件
Method
- readAsBinaryString(file对象或者blob对象) 将文件读取为二进制
- readAsText(file对象或者blob对象) 将文件读取为文本数据
- readAsDataURL(file对象或者blob对象) 将文件读取为DataURL
- readAsArrayBuffer(file对象或者blob对象) 将文件读取ArrayBuffer
- abort 中止读取
Event
-
onabort 数据读取中断时触发
-
onerror 数据读取出错是触发
-
onloadstart 数据读取开始时触发
-
onprogress 数据读取中
-
onload 数据读取成功完成时触发
-
onloadend 数据读取完成时触发，不论成功或失败
图像预览示例<input type="file" accept="image/*" id="upload"> <div id="preview"></div> <script> var oPreview=document.getElementById("preview"); var oUpload=document.getElementById("upload"); oUpload.onchange=function(){ var imageFile=oUpload.files[0]; var reader=new FileReader(); reader.readAsDataURL(imageFile); reader.onload=function(e){ oPreview.innerHTML="![]("+this.result+")"; //this.result就是URL } } </script>上面的例子是本地预览图片，在网页上通过img标签展示出来，同时也可以预览文本文件等。但是本地预览的应用不仅仅如此，你可以在文件上传到后台之前，对它做任何操作，一个常见的场景就是压缩图片，手机拍的照片通常都在2M以上，我们往往需要提前压缩再给后台，这样可以大大节省带宽。
网友评论