FileReader

FileReader

FileReader类型的对象可以用于读取一个Blob类型的对象(因为File继承了Blob, 所以FileReader也可以读取File类型)
可以根据需要, 把Blob读取成ArrayBuffer, DataURL(常见的base64就是DataURL类型数据), 二进制数据或文本数据

构造函数

var reader = new FileReader();

属性

error

表示读取时发送的错误

readyState

表示FileReader对象的状态

值	常量	说明
0	FileReader.EMPTY	还没有加载任何数据
1	FileReader.LOADING	数据正在被加载
2	FileReader.DONE	已完成全部的读取请求

result

读取的内容, 数据格式取决于读取的方式
只有在读取操作完成后该属性才有效

三个属性都是只读属性

函数

readAsArrayBuffer()

开始读取指定的Blob中的内容, 读取后数据格式为ArrayBuffer类型

readAsBinaryString()

开始读取指定的Blob中的内容, 读取后数据格式为原始二进制数据

readAsDataURL()

开始读取指定的Blob中的内容, 读取后的数据是一个base64字符串

readAsText()

开始读取指定的Blob中的内容, 读取结果是一个表示文件内容的字符串

abort()

用于取消文件的读取, 只能对中在读取状态(readState为1)的FileReader对象进行abort操作, 对其他状态的FileReader进行abort操作会报错

事件

load事件

传递一个函数给reader.onload, 以用来读取完成时执行

abort事件

传递一个函数给reader.onabort, 以用来读取中断时执行

error事件

传递一个函数给reader.onerror, 以用来读取错误时执行

示例代码

var reader = new FileReader();
reader.onload = function(event) {
  // event.target相当于reader
  console.log(event.target.result);
}
// 其他三个读取的函数用法与readAsArrayBuffer一样
reader.readAsArrayBuffer(blob); // blob应该是一个Blob对象或File对象