FileReader

FileReader 用来把文件读入内存，并且读取文件中的数据。FileReader对象提供了一个异步API，使用该 API 可以在浏览器主线程中异步访问文件系统，读取文件中的数据

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

构造函数

声明并返回一个新构造的 FileReader对象

let reader = new FileReader()

属性

属性名	类型	描述
error	DOMError	在读取文件时发生的错误. 只读.
readyState	unsigned short	表明FileReader对象的当前状态. 值为State constants中的一个. 只读
result	jsval	读取到的文件内容.这个属性只在读取操作完成之后才有效,并且数据的格式取决于读取操作是由哪个方法发起的. 只读.

方法

FileReader接口的方法

方法名	参数	描述
abort	(none)	终止读取操作
readAsBinaryString	file	将文件读取为二进制编码
readAsText	file,[encoding]	将文件读取为文本
readAsDataURL	file	将文件读取为DataURL

FileReader接口有4个方法，其中3个用来读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。

事件

FileReader 接口包含了一套完整的事件模型，用于捕获读取文件时的状态

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

使用

一般通过 DOM节点拿到文件读取的结果

// 一个文件上传的回调 <input type="file" onchange="onChange(event)">
function onChange(event) {
  var file = event.target.files[0];
  var reader = new FileReader();
  reader.onload = function(event) {
    // 文件里的文本会在这里被打印出来
    console.log(event.target.result)
  };

  reader.readAsDataURL(file);
}