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

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

多文件上传

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

效果如图

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

图像预览示例

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