文件 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 应用能够异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 FileBlob 对象来指定要读取的文件或数据。

FileReaderSync

使 web 应用能够同步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 FileBlob 对象来指定要读取的文件或数据。

对其他接口的扩展

URL.createObjectURL()

创建一个可用于获取 FileBlob 对象的 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

js

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

参见