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

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

多文件上传

说了这么多,多文件上传要怎么实现呢?



效果如图

通过HTML5实现多文件上传以及本地预览_第1张图片
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以上,我们往往需要提前压缩再给后台,这样可以大大节省带宽。

你可能感兴趣的:(通过HTML5实现多文件上传以及本地预览)