FileReader

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

备注： 此特性在 Web Worker 中可用。

FileReader 接口允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

文件对象可以从用户使用 <input type="file"> 元素选择文件而返回的 FileList 对象中获取，或者从拖放操作的 DataTransfer 对象中获取。FileReader 只能访问用户明确选择的文件内容，它不能用于从用户的文件系统中按路径名读取文件。要按路径名读取客户端文件系统上的文件，请使用文件系统访问 API。要读取服务器端文件，请使用 fetch()，如果跨源读取，则需要 CORS 权限。

EventTarget FileReader

构造函数

FileReader()

返回一个新的 FileReader 对象。

有关详细信息和示例，请参阅在 Web 应用程序中使用文件。

实例属性

FileReader.error 只读

一个表示在读取文件时发生的错误的 DOMException。

FileReader.readyState 只读

表示 FileReader 状态的数字。以下值之一：

常量名 值 描述
EMPTY 0 还没有加载任何数据。
LOADING 1 数据正在被加载。
DONE 2 已完成全部的读取请求。
FileReader.result 只读

文件的内容。该属性仅在读取操作完成后才有效，数据的格式取决于使用哪个方法来启动读取操作。

实例方法

FileReader.abort()

中止读取操作。在返回时，readyState 属性为 DONE。

FileReader.readAsArrayBuffer()

开始读取指定的 Blob 中的内容，一旦完成，result 属性中将包含一个表示文件数据的 ArrayBuffer 对象。

FileReader.readAsBinaryString()

开始读取指定的 Blob 中的内容。一旦完成，result 属性中将包含一个表示文件中的原始二进制数据的字符串。

FileReader.readAsDataURL()

开始读取指定的 Blob 中的内容。一旦完成，result 属性中将包含一个表示文件数据的 data: URL。

FileReader.readAsText()

开始读取指定的 Blob 中的内容。一旦完成，result 属性中将包含一个表示所读取的文件内容的字符串。可以指定可选的编码名称。

事件

使用 addEventListener() 方法或通过将事件侦听器分配给此接口的 oneventname 属性来侦听这些事件。一旦不再使用 FileReader，请使用 removeEventListener() 删除事件侦听器，以避免内存泄漏。

abort

当读取被中止时触发，例如因为程序调用了 FileReader.abort() 方法。

error

当读取由于错误而失败时触发。

load

读取成功完成时触发。

loadend

读取完成时触发，无论成功与否。

loadstart

读取开始时触发。

progress

读取数据时定期触发。

示例

使用 FileReader

此示例直接在浏览器中读取并显示文本文件的内容。

HTML

html
<h1>文件读取器</h1>
<input type="file" id="file-input" />
<div id="message"></div>
<pre id="file-content"></pre>

JavaScript

js
const fileInput = document.getElementById("file-input");
const fileContentDisplay = document.getElementById("file-content");
const messageDisplay = document.getElementById("message");

fileInput.addEventListener("change", handleFileSelection);

function handleFileSelection(event) {
  const file = event.target.files[0];
  fileContentDisplay.textContent = ""; // 清除之前的文件内容
  messageDisplay.textContent = ""; // 清除之前的消息

  // 验证文件是否存在及其类型
  if (!file) {
    showMessage("未选择文件。请选择一个文件。", "error");
    return;
  }

  if (!file.type.startsWith("text")) {
    showMessage("不支持的文件类型。请选择一个文本文件。", "error");
    return;
  }

  // 读取文件
  const reader = new FileReader();
  reader.onload = () => {
    fileContentDisplay.textContent = reader.result;
  };
  reader.onerror = () => {
    showMessage("读取文件时出错。请重试。", "error");
  };
  reader.readAsText(file);
}

// 向用户显示一条消息
function showMessage(message, type) {
  messageDisplay.textContent = message;
  messageDisplay.style.color = type === "error" ? "red" : "green";
}

结果

规范

Specification
File API
# APIASynch

浏览器兼容性

参见