文件 API - Web API | MDN

概念与用法

文件 API 使 Web 应用程序能够访问文件及其内容。

当用户通过文件 <input> 元素或拖放方式提供文件时，Web 应用程序可以访问这些文件。

以这种方式提供的一组文件用 FileList 对象表示，该对象使 Web 应用程序能够检索单个 File 对象。反过来，File 对象提供了对元数据（如文件名、大小、类型和最后修改日期）的访问。

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

与其他文件相关 API 的关系

还有两个其他主要 API 也处理文件：文件和目录条目 API 和文件系统 API。

文件 API 是最基础的一个。它支持读取和处理用户通过表单元素输入或拖放操作显式提供的文件数据。它还支持通过 Blob 进行二进制数据处理。

文件和目录条目 API 与文件 API 一样，也处理用户通过表单输入或拖放操作提供的文件。但是，输入元素现在允许选择一个目录或多个文件，而不是单个文件。然后，API 提供了一种处理目录或文件的方法。它主要是 Chrome 自己发明的——你会发现它对其他接口的扩展都带有 webkit 前缀。文件和目录条目 API 在其实现和标准化方面有一个更完整的故事。它最初旨在支持一个完整的虚拟文件系统，但现在只支持对用户提供的数据进行读取操作。

文件系统 API 为 Web 应用程序提供了一个虚拟文件系统，以便它们可以将数据持久存储在仅属于文档源（称为源私有文件系统 (OPFS)）的虚拟系统中。文件系统访问 API 进一步扩展了文件系统 API，允许网站在获得用户同意的情况下读取和写入用户文件。与文件 API 和文件和目录条目 API 不同，文件系统 API 完全是 JavaScript，不处理表单输入。

接口

Blob: 表示“二进制大对象”，意味着一个类文件对象，包含不可变的原始数据；Blob 可以作为文本或二进制数据读取，或者转换为 ReadableStream，以便可以使用其方法来处理数据。
File: 提供有关文件的信息，并允许网页中的 JavaScript 访问其内容。
FileList: 由 HTML <input> 元素的 files 属性返回；这允许你访问使用 <input type="file"> 元素选择的文件列表。它还用于使用拖放 API 拖放到 Web 内容中的文件列表；有关此用法的详细信息，请参阅 DataTransfer 对象。
FileReader: 使 Web 应用程序能够异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象来指定要读取的文件或数据。
FileReaderSync: 使 Web 应用程序能够同步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象来指定要读取的文件或数据。

其他接口的扩展

URL.createObjectURL(): 创建一个可用于获取 File 或 Blob 对象的 URL。
URL.revokeObjectURL(): 释放一个已存在的对象 URL，该 URL 是之前通过调用 URL.createObjectURL() 创建的。

示例

读取文件

在此示例中，我们提供了一个文件 <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", async () => {
  const [file] = fileInput.files;

  if (file) {
    output.innerText = await file.text();
  }
});