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.

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

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

文件对象可以从用户使用 <input> 元素选择文件而返回的 FileList 对象中获取，或者从拖放操作的 DataTransfer 对象中获取。

FileReader 只能访问用户明确选择的文件内容，无论是使用 HTML <input type="file"> 元素还是通过拖放。它不能用于从用户的文件系统中按路径名读取文件。要按路径名读取客户端文件系统上的文件，请使用文件系统访问 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

读取数据时定期触发。

规范

Specification
File API
# APIASynch

浏览器兼容性

BCD tables only load in the browser

参见