浅析H5图片上传

概述

最近需求上需要实现图片上传的功能，简单记录下实现过程。目前实现的功能比较简单，主要有以下几点：

图片预览
图片删除
拖拽上传
压缩上传

移动端实现方案：使用File API

主要使用到 FileList、File、FileReader、canvas、拖放API

FileList对象

一个FileList对象通常来自于一个HTML input元素的files属性,你可以通过这个对象访问到用户所选择的文件。当用户通过file控件选取文件后，这个控件的files属性值就是FileList对象。它在结构上类似于数组，包含用户选取的多个文件。

通过表单控件获取FileList对象

通过监听onchange事件，选择图片后，可以通过files属性获取图片信息，其中accept属性为接收到文件格式，multiple 属性设置后支持选择多个文件。

    <input type="file" name="demo" accept="image/jpeg,image/png" onchange="console.log(this.files.length)" multiple>

通过拖放获取FileList对象

DataTransfer对象是用于保存在一次拖放操作的被拖动的数据。通过DataTransfer.files属性可以获取所有在数据传输中可用的本地文件的列表。具体查看DataTransfer API和拖放API。

File对象

File API提供File对象，它是FileList对象的成员，包含了文件的一些元信息，比如文件名、上次改动时间、文件大小和文件类型。File对象文档。File对象的属性值如下:

name：文件名，该属性只读。
size：文件大小，单位为字节，该属性只读。
type：文件的MIME类型，如果分辨不出类型，则为空字符串，该属性只读。
lastModified：文件的上次修改时间，格式为时间戳。
lastModifiedDate：文件的上次修改时间，格式为Date对象实例。

例如：

<input type="file" name="demo" accept="image/jpeg,image/png" onchange="upload()" multiple>

<script>

    function upload(){

    var file = document.querySelector('input').files[0];

        document.writeln(file.name);

        document.writeln(file.size);

        document.writeln(file.type);

        document.writeln(file.lastModified);

        document.writeln(file.lastModifiedDate);

    }

</script>

// 13910DAB-D0EC-4DE6-8876-CFAF9EDA3086.png

// 28345

// image/png

// 1500826120000

// Mon Jul 24 2017 00:08:40 GMT+0800 (CST)

FileReader 对象

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，它的参数是File对象或Blob对象。对于不同类型的文件，FileReader提供不同的方法读取文件。以下是相关方法及事件。详细查看api

方法

readAsBinaryString(Blob|File)：返回二进制字符串，该字符串每个字节包含一个0到255之间的整数。
readAsText(Blob|File, opt_encoding)：返回文本字符串。默认情况下，文本编码格式是’UTF-8’，可以通过可选的格式参数，指定其他编码格式的文本。
readAsDataURL(Blob|File)：返回一个基于Base64编码的data-uri对象。
readAsArrayBuffer(Blob|File)：返回一个ArrayBuffer对象。

事件处理

Onabort ：读取操作被中止时调用.
Onerror ：当读取操作发生错误时调用.
Onload ：当读取操作成功完成时调用.
Onloadend ：当读取操作完成时调用,不管是成功还是失败.该处理程序在onload或者onerror之后调用.
Onloadstart：当读取操作将要开始之前调用.
Onprogress ：在读取数据过程中周期性调用.

创建一个FileReader对象

    let reader = new FileReader();

readAsDataURL 读取图片

readAsDataURL方法返回一个data URL，它的作用基本上是将文件数据进行Base64编码。你可以将返回值设为图像的src属性。

        <div class="imgPreview">

    <img src="" width="100" height="100">

</div>

<input type="file" name="demo" accept="image/jpeg,image/png" onchange="upload()" multiple>

<script>

    function upload(){

        var file = document.querySelector('input').files[0];

        var reader = new FileReader();

        reader.onload = function(e){

            // onload事件的回调函数接受一个事件对象，该对象的target.result就是文件的内容

            document.querySelector('img').src = e.target.result;

        };

        reader.readAsDataURL(file);

    }

</script>

浏览器兼容性

IE10以下的版本不支持FileReader()构造函数.不过可以利用滤镜来兼容旧版本的IE:兼容IE的图片本地预览.

第三方组件

需要兼容PC端可以使用webuploader组件

http://fex.baidu.com/webuploader/

参考资料