FileReader

FileReader

语法

• var reader = new FileReader()

属性

• 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 继承自 EventTarget, 所以所有这些事件也可以通过 addEventListener 方法使用

方法

• FileReader.abort() 中止读取操作。在返回时，readyState 属性为 DONE
• FileReader.readAsArrayBuffer() 开始读取指定的 Blob 中的内容，一旦完成，result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象
• FileReader.readAsBinaryString() 开始读取指定的 Blob 中的内容，一旦完成，result 属性中将包含所读取文件的原始二进制数据
• FileReader.readAsDataURL() 开始读取指定的 Blob 中的内容，一旦完成，result 属性中将包含一个 data: URL 格式的字符串以表示所读取文件的内容
• FileReader.readAsText() 开始读取指定的 Blob 中的内容，一旦完成，result 属性中将包含一个字符串以表示所读取的文件内容

属性

error

FileReader.error 会返回一个 DOMError 对象

onload

• 当 FileReader 读取文件的方式为 readAsArrayBuffer, readAsBinaryString, readAsDataURL 或者 readAsText 的时候，会触发一个 load 事件。从而可以使用 FileReader.onload 属性对该事件进行处理
• // 一个文件上传的回调 <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.readAsText(file);
• }

readyState

• 提供 FileReader 读取操作时的当前状态
• var state = instanceOfFileReader.readyState
• 一个数字，用来表示 FileReader API的三种可能状态

result

• 返回文件的内容。只有在读取操作完成后，此属性才有效，返回的数据的格式取决于是使用哪种读取方法来执行读取操作的
• var file = instanceOfFileReader.result
• 一个字符串或者一个 ArrayBuffer，这个取决于读取操作是使用哪种方法来进行的