[HTML5] FileReader对象

FileReader主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件。可以使用File对象或者Blob对象来指定所要处理的文件或数据。

创建实例
let reader=new FileReader();

方法

1.reader.readAsText()

readAsText 方法可以将 Blob 或者 File 对象转根据特殊的编码格式转化为内容(字符串形式)

$("#file").change(function(e){ //input type="file"
    let file=e.target.files[0];
    if(file){
        //读取本地文件，以gbk编码方式输出
        var reader = new FileReader();
        reader.readAsText(file,"gbk");
        reader.onload = function(){
            //读取完毕后输出结果
            console.log(this.result);
        }
    }
})

上传的是.txt文件

上传的是img，乱码掉了

readAsText读取文件的单位是字符，故对于文本文件，只要按规定的编码方式读取即可；
而对于媒体文件（图片、音频、视频），其内部组成并不是按字符排列，故采用 readAsText读取，会产生乱码，同时也不是最理想的读取文件的方式。

2.reader.readAsDataURL()

readAsDataURL 方法会读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState会变成已完成DONE，并触发 loadend 事件，同时 result 属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容。

上传的图片

上传的.txt文件

上传的.xls文件

3.readAsBinaryString

OMG

4.readAsArrayBuffer()

FileReader 接口提供的 readAsArrayBuffer() 方法用于启动读取指定的 Blob 或 File 内容。当读取操作完成时，readyState 变成 DONE（已完成），并触发 loadend事件，同时 result 属性中将包含一个 ArrayBuffer 对象以表示所读取文件的数据。

上传的.txt文件

上传的word文件

上传的img

事件

onload

当文件成功读取时，执行load 事件

abort

当读取已经中止事件被触发

error

当读取因错误而失败时（例如，因为找不到文件或不可读），会触发错误事件

loadstart

文件读取操作开始时会触发该事件

progress

该progress事件被解雇周期性的FileReader读取数据。

loadend

loadend当文件读取已成功完成时，将触发该事件

补加一个readyState

$("#file").change(function(e){
    let file=e.target.files[0];
    if(file){
        //读取本地文件，以gbk编码方式输出
        var reader = new FileReader();
        console.log(reader.readyState);//0
        reader.readAsDataURL(file);
        reader.onload = function(){
            //读取完毕后输出结果
            console.log(this.result);
            console.log(reader.readyState)//2
        }
        console.log(reader.readyState)//1
    }
})

输出顺序也是 0 1 2
0 ->尚未加载任何数据
1 ->目前正在加载数据。
2 ->整个读取请求已完成。