【html5】FileReader读取文件

FileReader：

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

其中File对象可以是来自用户在一个元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。

属性

FileReader.error 

一个DOMException，表示在读取文件时发生的错误 。

FileReader.readyState 

表示FileReader状态的数字。取值如下：

常量名 值 描述

EMPTY 0 还没有加载任何数据.

LOADING 1 数据正在被加载.

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

FileReader.result 

文件的内容。该属性仅在读取操作完成后才有效，数据的格式取决于使用哪个方法来启动读取操作。

事件处理函数：

FileReader.onabort

处理abort事件。该事件在读取操作被中断时触发。

FileReader.onerror

处理error事件。该事件在读取操作发生错误时触发。

FileReader.onload

处理load事件。该事件在读取操作完成时触发。

FileReader.onloadstart

处理loadstart事件。该事件在读取操作开始时触发。

FileReader.onloadend

处理loadend事件。该事件在读取操作结束时（要么成功，要么失败）触发。

FileReader.onprogress

处理progress事件。该事件在读取Blob时触发。

方法：

FileReader.abort()

中止读取操作。在返回时，readyState属性为DONE。

语法：instanceOfFileReader.abort();

该方法可以取消 FileReader 的读取操作，触发之后 readyState 为已完成（DONE）。

FileReader.readAsArrayBuffer()

开始读取指定的 Blob中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象.

语法：instanceOfFileReader.readAsArrayBuffer(blob);

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

FileReader.readAsBinaryString() 

开始读取指定的Blob中的内容。一旦完成，result属性中将包含所读取文件的原始二进制数据。

语法：instanceOfFileReader.readAsBinaryString(blob);

readAsBinaryString 方法会读取指定的 Blob 或 File 对象，当读取完成的时候，readyState  会变成DONE（已完成），并触发 loadend 事件，同时 result 属性将包含所读取文件原始二进制格式。

FileReader.readAsDataURL()

开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容。

语法：instanceOfFileReader.readAsDataURL(blob);

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

FileReader.readAsText()

开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个字符串以表示所读取的文件内容。

语法：instance of FileReader.readAsText(blob[, encoding]);

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

这个方法是异步的，也就是说，只有当执行完成后才能够查看到结果，如果直接查看是无结果的，并返回undefined

也就是说必须要挂载 实例下的 onload 或 onloadend 的方法处理转化后的结果

当转化完成后， readyState 这个参数就会转换 为 done 即完成态， event("loadend") 挂载的事件会被触发，并可以通过事件返回的形参得到中的 FileReader.result 属性得到转化后的结果

使用方法：

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

// 如果浏览器支持

if (typeof (FileReader) !== 'undefined') {

        // 实例化类

         let reader = new FileReader();

        // 读取

         reader.onload = (e: any) => {

                    this.pdfSrc = e.target.result;

                    // this.pdfSrc = "http://*.*.*.*:8889/group1/M00/00/6A/G0488.pdf";

          };

          reader.readAsArrayBuffer($img.files[0]);

}

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

应用fileReader的实际作用：

我们知道，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(){

                // 显示图片

                document.getElementById("file_img").src = this.result;

        }

    }

}

二进制数据上传：

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){

                // 响应成功       

            }

        }

    }

}