Javascript File Reader

JavaScript FileReader 是一种允许开发者异步查看文件数据的 API。FileReader 提供多种文件读取方法，包括 readAsArrayBuffer() 和 readAsText()；文件读取时会触发 load 事件。FileReader 库的 createObjectURL() 方法使开发者能够创建文件并将其保存到用户的设备。它是一种有效且可行的方法，无需服务器端后端即可访问本地文件内容。

JavaScript FileReader 的使用

• 当您将文件拖放到网页浏览器中时，JavaScript 会将所有文档表示为 File 对象。它使用文件输入元素选择要提交的文件。
• 在 JavaScript 中可以使用 File 对象访问所选文件。JavaScript 使用 FileList 对象存储 File 对象。
• FileReader 对象用于查看文件的内容。请记住，FileReader 只能通过拖放或文件输入查看您选择的文件。

语法

filereader 语法显示了不带参数的方法。

JavaScript filereader 如何工作

• 根据用户需求创建 html、css 和 javascript 页面或标签。
• 使用文件类型输入选择文件和文档。

• 将 javascript 文件变量与输入文件一起使用。

• 使用 javascript filereader 语法。

• 读取将其用作输入值的文件。

示例

基本的 filereader 示例显示了惰性文件并显示了文件的所需数据。我们可以在警报框中显示结果数据；否则显示错误消息。

输出

输出图像显示带有警报弹出框的文件名。

JavaScript FileReader 的构造函数

JavaScript FileReader API 提供多个构造函数来构建 FileReader 对象。这些构造函数定义 FileReader 对象的属性，包括要读取的文件和要执行的读取操作类型。

以下是 FileReader 类的主构造函数

• FileReader()

使用不带参数的对象 () 创建了一个新的 FileReader 对象。它使用其预设属性初始化对象。

• FileReader(file Blob)

函数 Object() 创建一个新的 FileReader 对象并指定要读取的文件。必须提供一个表示要读取的文件的 Blob 对象作为文件参数。

注意：在 JavaScript 中，Blob（二进制大对象）是一种数据结构，用于将文件表示为不可变、原始数据对象。Blob 可用于存储和传输大量数据，包括文件、图像和二进制数据。

• FileReader(file: Blob, encoding: string)

FileReader 除了设置要读取的文件和指定文件的编码之外，此函数 Object() { [native code] } 还生成一个新的 FileReader 对象。encoding 参数指定文件的字符编码，该文件必须是表示要查看的文件的 Blob 对象。

这些构造函数用于构建和初始化 FileReader 对象。使用适当的读取方法（例如 readAsArrayBuffer），对象可以在创建后读取文件。

JavaScript FileReader 中的事件

开发者可以使用 JavaScript FileReader API 异步读取用户计算机中的文件。这通常与 HTML5 文件输入元素结合使用，以使用户能够将文件上传到 Web 应用程序。

JavaScript FileReader 有多个事件可用于监视文件读取活动的进展和完成。这些事件如下：

1. loadstart：文件读取操作开始时触发此事件。
2. progress：此事件在文件读取期间定期生成，使开发者能够监视操作的进度并向用户显示进度条。
3. load：文件访问操作完成时触发此事件。
4. abort：如果用户中断或取消文件读取过程，则会启动此事件。
5. error：如果读取文件出现问题，则会启动此事件。
6. loadend：无论文件读取过程成功与否，loadend 事件都会在文件读取过程完成后触发。

通过监视这些事件并做出适当的响应，开发者可以设计用户友好的文件上传界面，提供反馈并让用户了解文件上传的进度。

JavaScript FileReader 实例的属性

为了获取有关 FileReader 对象的信息，JavaScript FileReader API 提供了多个属性实例。这些属性用于获取有关正在查看的文件、读取操作的进度以及读取操作结果的详细信息。

以下是 FileReader API 的主要实例属性

• 当 FileReader 对象读取文件时，此属性会产生 DOMException 错误。

readyState：此属性给出 FileReader 对象的当前状态。它可以由以下任何数字表示

• 0：这表示尽管已创建 FileReader 对象，但未启动任何读取操作。
• 1：它表示读取过程处于进行中状态。
• 2：它表示读取过程已完成。
• result：根据执行的读取操作类型，此属性将读取操作的结果作为字符串、ArrayBuffer 或 DataURL 返回。
• 使用这些实例属性来访问 FileReader 对象和文件的信息。操作员可以访问实例属性，例如 reader.error、reader.readyState 和 reader.result。

示例

以下示例显示了读取值所需的图像和文件信息。

示例 1

以下示例显示了使用输入文件显示文件数据和结果。如果选择文件、图像或其他文档，输出将显示文件的基本信息，例如大小。

输出

下图显示了所选文件信息。

示例 2

以下示例显示了使用输入文件显示文件数据和显示数据。如果选择文件、图像或其他文档，则输出将显示文件的基本数据。

输出

下图显示了所选文件信息。

JavaScript 中的 FileReader 实例方法

JavaScript 的 FileReader 类中提供了多个实例方法，允许您从 File 或 Blob 对象检索数据。这些技术包括

• abort()

readyState 更改为 2（DONE 或 COMPLETED 状态），并且 abort() 方法终止读取过程。

• readAsArrayBuffer(blob)

可以使用此实例函数接收 Blob 或 File 对象信息并将其作为 ArrayBuffer 传递。这在处理二进制信息或您希望直接作为原始字节查看的文件时很有用。

• readAsBinaryString(blob)

与 readAsArrayBuffer() 不同，此函数将 Blob 或 File 的内容作为二进制字符串返回。

• readAsDataURL(blob)

可以使用此函数读取从 Blob 和 File 对象获取的信息，并且返回的数据将进行 base64 编码。这对于直接在浏览器中显示图像或其他类型的文件很有帮助。

• readAsText(blob, [encoding])

此方法允许您从 Blob 或 File 对象中提取数据并将其作为文本字符串返回。可以指定文本的编码。

• 除了 abort()

每个方法都接受 Blob 或 File 类型作为其第一个参数，并同步返回文件内的数据。这意味着为了查看文件的内容，您需要使用 FileReader 实例的 load 事件处理程序。

支持的网页浏览器

以下浏览器及其版本支持 JavaScript FileReader。

• Google Chrome v6.0 及以上
• Mozilla Firefox v3.6 及以上
• Microsoft Edge v12.0 及以上
• Apple Safari v6.0 及以上
• Opera v11.0 及以上

结论

JavaScript FileReader API 有多个事件可用于监视文件读取过程的进展和结束。

大多数当前的在线浏览器，包括 Chrome、Firefox、Edge、Safari 和 Opera，都支持 JavaScript 的 FileReader API。