浏览器—File 对象，FileList 对象，FileReader 对象

浏览器里读写本地文件，常用三个对象：File、FileList、FileReader。File 继承 Blob，出现在文件选择框和拖拽里；FileList 是一组 File；FileReader 负责把内容读成文本、二进制或 Data URL。

最常见入口是 <input type="file">：用户选中后，浏览器生成数组，每个成员都是 File 实例。

一、File 对象

File 用来读写文件信息。凡是能用 Blob 的地方都能用它。

// HTML 代码如下
// <input id="fileItem" type="file">
var file = document.getElementById('fileItem').files[0];
file instanceof File // true

上面的 file 是用户选中的第一个文件，它是 File 的实例。

1.1 构造函数

浏览器原生提供 File()：

new File(array, name [, options])

三个参数：

• array：数组，成员可以是二进制对象或字符串，表示文件内容。
• name：字符串，文件名或文件路径。
• options：可选配置对象。

配置对象可设两个属性：

• type：MIME 类型，默认空字符串。
• lastModified：时间戳，上次修改时间，默认为 Date.now()。

var file = new File(
  ['foo'],
  'foo.txt',
  {
    type: 'text/plain',
  }
);

1.2 实例属性和实例方法

• File.lastModified：最后修改时间
• File.name：文件名或文件路径
• File.size：文件大小（单位字节）
• File.type：文件的 MIME 类型

var myFile = new File([], 'file.bin', {
  lastModified: new Date(2018, 1, 1),
});
myFile.lastModified // 1517414400000
myFile.name // "file.bin"
myFile.size // 0
myFile.type // ""

内容为空且没设 MIME 时，size 为 0，type 为空字符串。File 没有自己的实例方法，继承 Blob 后可以使用 slice()。

二、FileList 对象

FileList 是类似数组的对象，每个成员都是 File，主要出现在两处：

• 文件控件节点（）的 files 属性，返回一个 FileList 实例。
• 拖拉一组文件时，目标区的 DataTransfer.files 属性，返回一个 FileList 实例。

// HTML 代码如下
// <input id="fileItem" type="file">
var files = document.getElementById('fileItem').files;
files instanceof FileList // true

实例属性主要是 length。实例方法主要是 item()，接受从零开始的整数。因为 FileList 像数组，myFileList[0] 等同于 myFileList.item(0)，一般用不到 item()。

三、FileReader 对象

FileReader 读取 File 或 Blob 里的文件内容。原生构造函数：

var reader = new 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);
}

文件控件一变就读第一个文件，成功则打印内容。实例方法：

• FileReader.abort()：终止读取，readyState 变成 2。
• FileReader.readAsArrayBuffer()：完成后 result 是 ArrayBuffer。
• FileReader.readAsBinaryString()：完成后 result 是原始二进制字符串。
• FileReader.readAsDataURL()：完成后 result 是 Data URL（Base64）。图片可用到 的 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 教程】浏览器模型—Cookie
• Navigator 对象，Screen 对象。
• 【JavaScript 教程】浏览器—window 对象
• 【JavaScript 教程】浏览器—浏览器环境概述
• XMLHttpRequest 对象
• 【JavaScript 教程】浏览器—同源限制
• 【JavaScript 教程】浏览器—CORS 通信
• 【JavaScript 教程】浏览器—Storage 接口
• 【JavaScript 教程】浏览器—History 对象
• Location对象，URL对象，URLSearchParams;对象
• 【JavaScript 教程】浏览器—ArrayBuffer对象，Blob对象

一句话总结：选文件得到 FileList，成员是 File（Blob 的子类）；要用内容就 new FileReader，按文本、二进制或 Data URL 三种格式读。