文件 API

概念和基本使用

文件 API 使得 web 应用可以访问文件和其中的内容。

当用户提供文件时，Web 应用可以通过使用文件 <input> 元素或拖放来访问它们。

以这种方式提供的文件集被表示为 FileList 对象，这使得 web 应用能够检索单个 File 对象。反过来，File 对象提供对元数据的访问，如文件的名称、大小、类型和最后修改日期。

可以将 File 对象传递给 FileReader 对象以访问文件的内容。FileReader 接口是异步的，FileReaderSync 接口提供了同步版本，但仅在 web worker 中可用。

接口

Blob: Blob 代表“二进制大对象”（类似于文件的不可变的原始数据对象）；Blob 可以作为文本或二进制数据被读取，或者转换为 ReadableStream，其方法可以用来处理数据。
File: 提供文件的信息并允许网页中的 JavaScript 代码访问其中的内容。
FileList: 由 HTML <input> 元素的 files 属性返回；这让你可以访问用 <input type="file"> 元素选择的文件列表。当使用拖放 API 时，它也被用于放入网页内容的文件列表；关于这种用法的细节，请参见 DataTransfer 对象。
FileReader: 使 web 应用能够异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象来指定要读取的文件或数据。
FileReaderSync: 使 web 应用能够同步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象来指定要读取的文件或数据。

对其他接口的扩展

URL.createObjectURL(): 创建一个可用于获取 File 或 Blob 对象的 URL。
URL.revokeObjectURL(): 释放先前通过调用 URL.createObjectURL() 创建的现有对象 URL。

示例

读取文件

在这个例子中，我们提供了一个文件 <input> 元素，当用户选择一个文件时，我们把选择的第一个文件的内容作为文本读取，并把结果显示在 <div> 元素中。

HTML

html

<input type="file" />
<div class="output"></div>

CSS

css

.output {
  overflow: scroll;
  margin: 1rem 0;
  height: 200px;
}

JavaScript

const fileInput = document.querySelector("input[type=file]");
const output = document.querySelector(".output");

fileInput.addEventListener("change", () => {
  const [file] = fileInput.files;
  if (file) {
    const reader = new FileReader();
    reader.addEventListener("load", () => {
      output.innerText = reader.result;
    });
    reader.readAsText(file);
  }
});

运行结果

规范

Specification
File API

参见

<input type="file">：文件 input 元素
DataTransfer 接口