H5中，FileReader使用

FileReader允许web应用程序异步读取存储在用户计算机上的文件的内容。

使用File 或 Bolb 对象指定要读取的文件或数据。

file对象可以是来自<input type="file" /> 选中的文件(拥有files属性，由传入的file对象组成)，也可以是来自拖放操作的DataTransfer对象。

 

1、创建FileReader对象

var reader = new FileReader()

2、方法

reader.abort（）   终止读取操作， 在返回时，readyState = 'DONE'

reader.readAsArrayBuffer(file)   按字节读取文件内容，result属性为ArrayBuffer对象表示

reader.readAsBinaryString(file)   按字节读取文件，result属性为文件的二进制串

reader.readAsDataURL(file)   result属性为 data：url 格式的字符串，即转为了base64

reader.readAsText(file)   result属性为一个字符串表示读取到的内容

3、事件

reader.onabort()     处理abort事件，读取中断时触发

reader.onerror()    读取发生错误时触发

reader.onload()     读取完成时触发

reader.onloadstart()    读取开始时触发

reader.onloadend()    读取结束时（要么成功，要么失败）触发

reader.onprogress()   读取Blob时触发

FileReader继承自EventTarget，所以可以通过addEventListener方法使用

4、属性

reader.error 读取文件时发生的错误

reader.readyState 表示状态的数字

            EMPTY  0   还没有加载任何数据

            LOADING  1  数据正在被加载

            DONE  2      已完成全部的读取请求

reader.result    读取到的文件内容

 

例子： 

<input type="file" accept=".png" οnchange="saveImg" />

<img src="" alt="图片" id="picture">

function saveImg(e) {

    let file = e.target.files[0];

    let reader = new FileReader()；

    reader.readAsDataURL(file)；

    reader.οnlοad= function(){

          if(this.result) {

                  document.getElementById('picture').setAttribute('src', this.result)

             } 

     }

}