FileReader 对象

FileReader 对象用于读取 File 对象或 Blob 对象所包含的文件内容。

浏览器原生提供一个 FileReader 构造函数，用来生成 FileReader 实例。

var reader = new FileReader();

FileReader 有以下的实例属性。

FileReader.error：读取文件时产生的错误对象
FileReader.readyState：整数，表示读取文件时的当前状态。一共有三种可能的状态， 0 表示尚未加载任何数据， 1 表示数据正在加载， 2 表示加载完成。
FileReader.result：读取完成后的文件内容，有可能是字符串，也可能是一个 ArrayBuffer 实例。
FileReader.onabort： abort 事件（用户终止读取操作）的监听函数。
FileReader.onerror： error 事件（读取错误）的监听函数。
FileReader.onload： load 事件（读取操作完成）的监听函数，通常在这个函数里面使用 result 属性，拿到文件内容。
FileReader.onloadstart： loadstart 事件（读取操作开始）的监听函数。
FileReader.onloadend： loadend 事件（读取操作结束）的监听函数。
FileReader.onprogress： progress 事件（读取操作进行中）的监听函数。

下面是监听 load 事件的一个例子。

// HTML 代码如下
// <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);
}

上面代码中，每当文件控件发生变化，就尝试读取第一个文件。如果读取成功（ load 事件发生），就打印出文件内容。

FileReader 有以下实例方法。

FileReader.abort()：终止读取操作， readyState 属性将变成 2 。
FileReader.readAsArrayBuffer()：以 ArrayBuffer 的格式读取文件，读取完成后 result 属性将返回一个 ArrayBuffer 实例。
FileReader.readAsBinaryString()：读取完成后， result 属性将返回原始的二进制字符串。
FileReader.readAsDataURL()：读取完成后， result 属性将返回一个 Data URL 格式（Base64 编码）的字符串，代表文件内容。对于图片文件，这个字符串可以用于 <img> 元素的 src 属性。注意，这个字符串不能直接进行 Base64 解码，必须把前缀 data:*/*;base64, 从字符串里删除以后，再进行解码。
FileReader.readAsText()：读取完成后， result 属性将返回文件内容的文本字符串。该方法的第一个参数是代表文件的 Blob 实例，第二个参数是可选的，表示文本编码，默认为 UTF-8。

下面是一个例子。

/* HTML 代码如下
  <input type="file" onchange="previewFile()">
  <img src="" height="200">
*/

function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.addEventListener('load', function () {
    preview.src = reader.result;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}

上面代码中，用户选中图片文件以后，脚本会自动读取文件内容，然后作为一个 Data URL 赋值给 <img> 元素的 src 属性，从而把图片展示出来。

返回JavaScript导航

FileReader 对象