html5 上传文件夹,通过HTML5实现多文件上传以及本地预览

在HTML5之前，通过一次只能上传一个文件，大部分多文件上传都是通过flash实现得(听说得，我没用过)，但是有了HTML5，多文件上传变得非常简单，并且可以本地预览。之前写过一个模仿QQ风格的移动端表单，支持多文件上传(图片)，并且可以本地预览。已放在GitHub[感兴趣的点这里]，没有维护，对它的外观不要介意。

多文件上传

说了这么多，多文件上传要怎么实现呢？

var Upload=document.getElementById("upload");

var formData=new FormData(); //通过FormData对象可以组装一组用 [XMLHttpRequest]发送请求的键/值对,它可以更灵活方便的发送表单数据。

Upload.οnchange=function(){ //onchange在你选择完文件时触发

var fileList=Upload.files ; //通过input的files属性获得fileList

for(let i=0;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);

}

}

效果如图

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 数据读取完成时触发，不论成功或失败

图像预览示例

var oPreview=document.getElementById("preview");

var oUpload=document.getElementById("upload");

oUpload.οnchange=function(){

var imageFile=oUpload.files[0];

var reader=new FileReader();

reader.readAsDataURL(imageFile);

reader.οnlοad=function(e){

oPreview.innerHTML="![]("+this.result+")"; //this.result就是URL

}

}

上面的例子是本地预览图片，在网页上通过img标签展示出来，同时也可以预览文本文件等。但是本地预览的应用不仅仅如此，你可以在文件上传到后台之前，对它做任何操作，一个常见的场景就是压缩图片，手机拍的照片通常都在2M以上，我们往往需要提前压缩再给后台，这样可以大大节省带宽。