FIleReader

FIleReader HTML5

参考链接：https://www.cnblogs.com/hhhyaaon/p/5929492.html
https://www.cnblogs.com/makan/p/4807086.html
使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要读取的文件或数据.其中File对象可以是来自用户在一个元素上选择文件后返回的FileList对象,也可以来自由拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后的返回结果。

创建FileReader对象

var reader = new FileReader();

事件

事件名称	描述
onabort	当读取操作被中止时调用
onerror	当读取操作发生错误时调用
onload	当读取操作成功完成时调用
onloadend	当读取操作完成时调用,不管是成功还是失败
onloadstart	当读取操作将要开始之前调用
onprogress	在读取数据过程中周期性调用

属性

属性名称	描述
error	DOMError 在读取文件时发生的错误，只读。
readyState	.unsigned short 当前状态值，0—EMPTY 还没有记载任何数据。1–LOADING 正在被记载。2—DONE 已完成全部的读取请求。
result	jsval 读取的文件内容，这个属性只在读取操作完成之后才有效，并且数据的格式取决于读取操作发起的方法。只读

方法

方法名	描述
abort():void	终止文件读取操作
readAsArrayBuffer(file):void	异步按字节读取文件内容，结果用ArrayBuffer对象表示
readAsBinaryString(file):void	异步按字节读取文件内容，结果为文件的二进制串，IE浏览器不支持该方法
readAsDataURL(file):void	异步读取文件内容，结果用data:url的字符串形式表示
readAsText(file,encoding):void	异步按字符读取文件内容，结果用字符串形式表示

FileReader通过异步的方式读取文件内容，结果均是通过事件回调获取，下面是一个读取本地txt文件内容的例子：

//1.检测浏览器是否支持FileReader
//测试结果，IE>=10,Google，FF
if (window.FileReader) {
    var fr = new FileReader();
    console.info(fr);
} else {
    alert("Not supported by your browser!");
}

<div class="container">
    <input type="file" id="file" multiple />
    <input type="button" id="btn1" value="选择上传文件" onclick="showFiles();" />
    <h4>
        选择文件如下:
    </h4>
    <blockquote></blockquote>
</div>

var fileBox = document.getElementById('file');
function showFiles() {
    //获取选择文件的数组
    var fileList = fileBox.files;
    for (var i = 0; i < fileList.length; i++) {
        var file = fileList[i];
        readFile(file);
    }
}
//读取文件内容
//reader.readAsArrayBuffer   //将读取结果 封装成 ArrayBuffer ，如果想使用一般需要转换成 Int8Array或DataView
//reader.readAsBinaryString  //在IE浏览器中不支持改方法
//reader.readAsText     该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8
//reader.readAsDataURL  //读取结果为DataURL 
//reader.readyState    上传中的状态
function readFile(file) {
    var reader = new FileReader();
    //reader.readAsText(file);
    //中文windows系统 txt 文本多数默认编码 gbk
    reader.readAsText(file, 'gbk');
    console.info(reader.readyState); // 状态值 1
    reader.onload = function (e) {
        console.info(e); //事件对象
        //e.target  FileReader
        //e.total   文件总大小，字节
        //e.type    上传状态‘load’
        //e.timeStamp  还不知道

        console.info(reader.readyState); //状态值 2
        var result = reader.result;
        $('.container blockquote').text(result);
    }
}

此外我们还可以通过注册onprogress、onerror等事件，记录文件读取进度或异常行为等等。

下面测试一下各种输出方式
首先准备一张图片（6764 字节）和一个txt文本（51字节）作为测试文件

 var reader = new FileReader();
// 通过四种方式读取文件
//reader.readAsXXX(file);   
reader.onload = function(){
    //查看文件输出内容
    console.log(this.result);
    //查看文件内容字节大小
    console.log(new Blob([this.result]))
}

readAsText
此方法可以通过不同的编码方式读取字符，我们使用utf-8读取

文本输出结果：

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

readAsDataURL


readAsDataURL会将文件内容进行base64编码后输出

readAsBinaryString


与readAsText不同的是，readAsBinaryString函数会按字节读取文件内容。
然而诸如0101的二进制数据只能被机器识别，若想对外可见，还是需要进行一次编码，而readAsBinaryString的结果就是读取二进制并编码后的内容。
尽管readAsBinaryString方法可以按字节读取文件，但由于读取后的内容被编码为字符，大小会受到影响，故不适合直接传输，也不推荐使用。
如：测试的图片文件原大小为6764 字节，而通过readAsBinaryString读取后，内容被扩充到10092个字节

readAsArrayBuffer


与readAsBinaryString类似，readAsArrayBuffer方法会按字节读取文件内容，并转换为ArrayBuffer对象。
我们可以关注下文件读取后大小，与原文件大小一致。
这也就是readAsArrayBuffer与readAsBinaryString方法的区别，readAsArrayBuffer读取文件后，会在内存中创建一个ArrayBuffer对象（二进制缓冲区），将二进制数据存放在其中。通过此方式，我们可以直接在网络中传输二进制内容。

显示本地图片实例
我们知道，img的src属性或background的url属性，可以通过被赋值为图片网络地址或base64的方式显示图片。
在文件上传中，我们一般会先将本地文件上传到服务器，上传成功后，由后台返回图片的网络地址再在前端显示。
通过FileReader的readAsDataURL方法，我们可以不经过后台，直接将本地图片显示在页面上。这样做可以减少前后端频繁的交互过程，减少服务器端无用的图片资源，代码如下：

var input  = document.getElementById("file");   // input file
input.onchange = function(){
    var file = this.files[0];
        if(!!file){
            var reader = new FileReader();
            // 图片文件转换为base64
            reader.readAsDataURL(file);
            reader.onload = function(e){
                // 显示图片(三种写法)
                document.getElementById("img").src = this.result;
                document.getElementById("img").src = reader.result;
                document.getElementById("img").src = e.target.result;
        }
    }
}

对于图片上传，我们也可以先将图片转换为base64进行传输，此时由于传输的图片内容就是一段字符串，故上传接口可以当做普通post接口处理，当图片传输到后台后，可以在转换为文件实体存储。
当然，考虑到base64转换效率及其本身的大小，本方法还是适合于上传内容简单或所占内存较小的文件。

二进制数据上传
HTML5体系的建立引入了一大堆新的东西，基于XHR2，我们可以直接上传或下载二进制内容，无需像以往一样通过form标签由后端拉取二进制内容。
简单整理下上传逻辑：
1、通过input[type=“file”]标签获取本地文件File对象
2、通过FileReader的readAsArrayBuffer方法将File对象转换为ArrayBuffer
3、创建xhr对象，配置请求信息
4、通过xhr.sendAsBinary直接将文件的ArrayBuffer内容装填至post body后发送
代码实现如下：

var input  = document.getElementById("file");   // input file
input.onchange = function(){
    var file = this.files[0];
        if(!!file){
            var reader = new FileReader();
            reader.readAsArrayBuffer(file);
            reader.onload = function(){
                var binary = this.result;
                upload(binary);
        }
    }
}

//文件上传
function upload(binary){
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "http://xxxx/opload");
    xhr.overrideMimeType("application/octet-stream");
    //直接发送二进制数据
    if(xhr.sendAsBinary){
        xhr.sendAsBinary(binary);
    }else{
        xhr.send(binary);
    }
    
    // 监听变化
    xhr.onreadystatechange = function(e){
        if(xhr.readyState===4){
            if(xhr.status===200){
                // 响应成功       
            }
        }
    }
}