文件 API

注意：此功能在Web Workers中可用。

概念和用法

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

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

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

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

接口

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.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", async () => {
  const [file] = fileInput.files;

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

结果

规范

规范
文件 API