文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载导读本文围绕 Modern JavaScript Tutorialjavascript.info仓库中 File 与 FileReader 章节 展开系统讲解浏览器端File对象的来源与结构、FileReader的异步读取模型事件驱动、三种读取格式字符串 /ArrayBuffer/ base64 data URL以及 Web Worker 中的同步变体FileReaderSync。读完本文你将掌握如何从input typefile与拖拽事件中获取文件、按需选择read*方法完成文本预览、二进制底层处理与图片 base64 展示并理解File与Blob的继承关系及不读文件直接使用URL.createObjectURL的更优路径。File 对象继承自 Blob 的文件抽象在浏览器端File对象继承自Blob并在此基础上扩展了与文件系统相关的能力。正如仓库 Blob 章节 所述Blob是带类型的二进制数据binary data with type而File则在Blob的全部属性和方法之外额外携带了文件名与修改时间等文件元信息。两种获取 File 的途径途径一直接使用构造函数创建语法与Blob构造器非常相似new File(fileParts, fileName, [options])参数说明fileParts—— 一个数组元素可以是Blob、BufferSource如Uint8Array或String值fileName—— 文件名字符串options—— 可选对象目前支持lastModified—— 最后修改时间戳整数形式的日期毫秒值。对比可见该构造器与new Blob(blobParts, options)见 Blob 章节一脉相承Blob构造器额外支持typeMIME 类型与endings换行符转换策略选项而File构造器则在 blob 部件之外增加了fileName参数和lastModified选项。途径二更常见从浏览器接口获取。通过input typefile、拖拽DragnDrop或其他浏览器接口得到的File对象其文件信息名称、大小、修改时间直接来自操作系统无需手动指定。File 的专属属性由于File继承自Blob它拥有Blob的全部属性和方法如size、type、slice()、arrayBuffer()、stream()等此外还新增两个属性name—— 文件名lastModified—— 最后修改时间戳。下面的示例演示如何从input typefile中取出第一个文件并读取其元信息input typefile onchangeshowFile(this) script function showFile(input) { let file input.files[0]; alert(File name: ${file.name}); // 例如 my.png alert(Last modified: ${file.lastModified}); // 例如 1552830408824 } /script这里有一个易被忽略的细节input支持多文件选择因此input.files是一个类数组对象FileList其中保存了所有被选中的文件上例只选择一个文件所以直接取input.files[0]。若需遍历全部文件可以用for...of或索引访问。FileReader以事件驱动的方式读取 Blob 与 FileFileReader 是一个用途单一的对象——从Blob因而也包括File中读取数据。由于磁盘读取可能耗时FileReader采用异步事件模型交付数据不会阻塞页面主线程。构造与核心方法构造器不接受任何参数let reader new FileReader(); // 无参数主要方法readAsArrayBuffer(blob)—— 以二进制格式ArrayBuffer读取数据readAsText(blob, [encoding])—— 以字符串形式读取数据可指定编码默认utf-8readAsDataURL(blob)—— 读取二进制数据并将其编码为 base64 的 data URLabort()—— 取消读取操作。如何选择 read* 方法选择哪种read*方法取决于我们需要的目标格式以及后续如何使用数据readAsArrayBuffer—— 适用于二进制文件需要执行底层二进制操作如逐字节处理的场景。若只是做切片这类高层操作由于File继承自Blob可以直接调用Blob的slice()等方法根本无需先读取。关于ArrayBuffer与各类视图Uint8Array、DataView等的底层关系可参考仓库 ArrayBuffer, binary arrays 章节readAsText—— 适用于文本文件目标是直接得到一个 JavaScript 字符串readAsDataURL—— 适用于把数据塞进src属性以驱动img或其他标签的场景。不过对这种需求存在更优替代方案URL.createObjectURL(file)详见 Blob 章节。事件序列与结果读取读取进行过程中会依次触发一系列事件loadstart—— 开始加载progress—— 读取过程中周期性触发load—— 无错误读取完成abort—— 调用了abort()error—— 发生错误loadend—— 读取结束无论成功还是失败都会触发。读取结束后通过以下属性访问结果reader.result—— 读取结果成功时有效reader.error—— 错误对象失败时有效。其中使用最广泛的事件当属load与error。下面是一个完整的文本文件读取示例input typefile onchangereadFile(this) script function readFile(input) { let file input.files[0]; let reader new FileReader(); reader.readAsText(file); reader.onload function() { console.log(reader.result); }; reader.onerror function() { console.log(reader.error); }; } /scriptFileReader 不止能读文件Blob 格式转换器正如 Blob 章节 中提到的FileReader不仅能读取文件还能读取任意Blob因此它常被用作 Blob 到其他格式的转换工具readAsArrayBuffer(blob)—— 转换为ArrayBufferreadAsText(blob, [encoding])—— 转换为字符串可作为TextDecoder的替代方案TextDecoder的用法详见仓库 TextDecoder and TextEncoder 章节readAsDataURL(blob)—— 转换为 base64 data URL。这一特性在 Blob 章节的下载示例中已有应用先用reader.readAsDataURL(blob)把动态生成的 Blob 转成 data URL再赋值给a的href触发下载。两种 URL 化方案各有取舍——URL.createObjectURL(blob)更简单、更直接但需要手动revokeObjectURL释放内存base64 data URL 无需撤销但大对象编码存在性能与内存开销。Web Worker 中的 FileReaderSync同步读取变体对于 Web Worker还存在FileReader的同步版本 FileReaderSync。它与FileReader的关键区别在于FileReaderSync的read*方法不产生事件而是像普通函数一样直接返回结果。它只能在 Web Worker 内部使用因为同步调用读取文件时可能发生的延迟在 Worker 中影响较小——Worker 中的阻塞不会影响页面主线程的交互。典型使用方式是在 Worker 线程内同步获取文件内容// 这段代码运行在 Web Worker 内部 let reader new FileReaderSync(); let text reader.readAsText(file); // 同步返回字符串实战要点与总结不读取也能用URL.createObjectURL 与网络直传File对象继承自Blob这一设计带来了两个非常实用的推论多数情况下无需读取文件内容。与 Blob 的处理方式一致可以用URL.createObjectURL(file)生成短 URL形如blob:origin/uuid赋给a实现下载、赋给img展示图片或用于 canvas 等场景细节见 Blob 章节网络请求原生支持File。XMLHttpRequest、fetch等网络 API 原生接受File对象作为请求体File是Blob的子类上传文件几乎零成本。仓库 fetch 章节 明确指出请求体body可以是string、FormData、BufferSource、Blob或UrlSearchParams若需附带文件及其他字段可借助 FormData 章节 中formData.append(name, blob, fileName)的方式组装表单。核心结论速览File对象继承自Blob除Blob的属性和方法外File还拥有name与lastModified属性并具备从文件系统读取的内部能力File对象通常来自用户输入例如input typefile或拖拽事件FileReader能以三种格式读取文件或 Blob字符串readAsText、ArrayBufferreadAsArrayBuffer、base64 data URLreadAsDataURL读取是异步的通过load/error等事件与result/error属性获取结果在 Web Worker 内可使用FileReaderSync做同步读取若目标只是展示或下载优先考虑URL.createObjectURL(file)而非读取文件内容若目标是上传fetch/XMLHttpRequest可直接接受File对象。赞分享文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载相关推荐JavaScript教程深入理解File和FileReader对象JavaScript教程深入理解File和FileReader对象 概述 在现代Web开发中处理文件是一个常见需求。JavaScript通过File APIJavaScript教程深入理解File和FileReader对象JavaScript教程深入理解File和FileReader对象 前言 在现代Web开发中处理文件是一个常见的需求。无论是上传用户头像、解析Excel表格文档/教程前端JavaScript教程深入理解File和FileReader对象JavaScript教程深入理解File和FileReader对象 在Web开发中处理文件是一个常见需求。本文将深入探讨JavaScript中的File和F创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Modern JavaScript Tutorial：File 与 FileReader 深入解析——浏览器端文件对象的读取与实战
文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载导读本文围绕 Modern JavaScript Tutorialjavascript.info仓库中 File 与 FileReader 章节 展开系统讲解浏览器端File对象的来源与结构、FileReader的异步读取模型事件驱动、三种读取格式字符串 /ArrayBuffer/ base64 data URL以及 Web Worker 中的同步变体FileReaderSync。读完本文你将掌握如何从input typefile与拖拽事件中获取文件、按需选择read*方法完成文本预览、二进制底层处理与图片 base64 展示并理解File与Blob的继承关系及不读文件直接使用URL.createObjectURL的更优路径。File 对象继承自 Blob 的文件抽象在浏览器端File对象继承自Blob并在此基础上扩展了与文件系统相关的能力。正如仓库 Blob 章节 所述Blob是带类型的二进制数据binary data with type而File则在Blob的全部属性和方法之外额外携带了文件名与修改时间等文件元信息。两种获取 File 的途径途径一直接使用构造函数创建语法与Blob构造器非常相似new File(fileParts, fileName, [options])参数说明fileParts—— 一个数组元素可以是Blob、BufferSource如Uint8Array或String值fileName—— 文件名字符串options—— 可选对象目前支持lastModified—— 最后修改时间戳整数形式的日期毫秒值。对比可见该构造器与new Blob(blobParts, options)见 Blob 章节一脉相承Blob构造器额外支持typeMIME 类型与endings换行符转换策略选项而File构造器则在 blob 部件之外增加了fileName参数和lastModified选项。途径二更常见从浏览器接口获取。通过input typefile、拖拽DragnDrop或其他浏览器接口得到的File对象其文件信息名称、大小、修改时间直接来自操作系统无需手动指定。File 的专属属性由于File继承自Blob它拥有Blob的全部属性和方法如size、type、slice()、arrayBuffer()、stream()等此外还新增两个属性name—— 文件名lastModified—— 最后修改时间戳。下面的示例演示如何从input typefile中取出第一个文件并读取其元信息input typefile onchangeshowFile(this) script function showFile(input) { let file input.files[0]; alert(File name: ${file.name}); // 例如 my.png alert(Last modified: ${file.lastModified}); // 例如 1552830408824 } /script这里有一个易被忽略的细节input支持多文件选择因此input.files是一个类数组对象FileList其中保存了所有被选中的文件上例只选择一个文件所以直接取input.files[0]。若需遍历全部文件可以用for...of或索引访问。FileReader以事件驱动的方式读取 Blob 与 FileFileReader 是一个用途单一的对象——从Blob因而也包括File中读取数据。由于磁盘读取可能耗时FileReader采用异步事件模型交付数据不会阻塞页面主线程。构造与核心方法构造器不接受任何参数let reader new FileReader(); // 无参数主要方法readAsArrayBuffer(blob)—— 以二进制格式ArrayBuffer读取数据readAsText(blob, [encoding])—— 以字符串形式读取数据可指定编码默认utf-8readAsDataURL(blob)—— 读取二进制数据并将其编码为 base64 的 data URLabort()—— 取消读取操作。如何选择 read* 方法选择哪种read*方法取决于我们需要的目标格式以及后续如何使用数据readAsArrayBuffer—— 适用于二进制文件需要执行底层二进制操作如逐字节处理的场景。若只是做切片这类高层操作由于File继承自Blob可以直接调用Blob的slice()等方法根本无需先读取。关于ArrayBuffer与各类视图Uint8Array、DataView等的底层关系可参考仓库 ArrayBuffer, binary arrays 章节readAsText—— 适用于文本文件目标是直接得到一个 JavaScript 字符串readAsDataURL—— 适用于把数据塞进src属性以驱动img或其他标签的场景。不过对这种需求存在更优替代方案URL.createObjectURL(file)详见 Blob 章节。事件序列与结果读取读取进行过程中会依次触发一系列事件loadstart—— 开始加载progress—— 读取过程中周期性触发load—— 无错误读取完成abort—— 调用了abort()error—— 发生错误loadend—— 读取结束无论成功还是失败都会触发。读取结束后通过以下属性访问结果reader.result—— 读取结果成功时有效reader.error—— 错误对象失败时有效。其中使用最广泛的事件当属load与error。下面是一个完整的文本文件读取示例input typefile onchangereadFile(this) script function readFile(input) { let file input.files[0]; let reader new FileReader(); reader.readAsText(file); reader.onload function() { console.log(reader.result); }; reader.onerror function() { console.log(reader.error); }; } /scriptFileReader 不止能读文件Blob 格式转换器正如 Blob 章节 中提到的FileReader不仅能读取文件还能读取任意Blob因此它常被用作 Blob 到其他格式的转换工具readAsArrayBuffer(blob)—— 转换为ArrayBufferreadAsText(blob, [encoding])—— 转换为字符串可作为TextDecoder的替代方案TextDecoder的用法详见仓库 TextDecoder and TextEncoder 章节readAsDataURL(blob)—— 转换为 base64 data URL。这一特性在 Blob 章节的下载示例中已有应用先用reader.readAsDataURL(blob)把动态生成的 Blob 转成 data URL再赋值给a的href触发下载。两种 URL 化方案各有取舍——URL.createObjectURL(blob)更简单、更直接但需要手动revokeObjectURL释放内存base64 data URL 无需撤销但大对象编码存在性能与内存开销。Web Worker 中的 FileReaderSync同步读取变体对于 Web Worker还存在FileReader的同步版本 FileReaderSync。它与FileReader的关键区别在于FileReaderSync的read*方法不产生事件而是像普通函数一样直接返回结果。它只能在 Web Worker 内部使用因为同步调用读取文件时可能发生的延迟在 Worker 中影响较小——Worker 中的阻塞不会影响页面主线程的交互。典型使用方式是在 Worker 线程内同步获取文件内容// 这段代码运行在 Web Worker 内部 let reader new FileReaderSync(); let text reader.readAsText(file); // 同步返回字符串实战要点与总结不读取也能用URL.createObjectURL 与网络直传File对象继承自Blob这一设计带来了两个非常实用的推论多数情况下无需读取文件内容。与 Blob 的处理方式一致可以用URL.createObjectURL(file)生成短 URL形如blob:origin/uuid赋给a实现下载、赋给img展示图片或用于 canvas 等场景细节见 Blob 章节网络请求原生支持File。XMLHttpRequest、fetch等网络 API 原生接受File对象作为请求体File是Blob的子类上传文件几乎零成本。仓库 fetch 章节 明确指出请求体body可以是string、FormData、BufferSource、Blob或UrlSearchParams若需附带文件及其他字段可借助 FormData 章节 中formData.append(name, blob, fileName)的方式组装表单。核心结论速览File对象继承自Blob除Blob的属性和方法外File还拥有name与lastModified属性并具备从文件系统读取的内部能力File对象通常来自用户输入例如input typefile或拖拽事件FileReader能以三种格式读取文件或 Blob字符串readAsText、ArrayBufferreadAsArrayBuffer、base64 data URLreadAsDataURL读取是异步的通过load/error等事件与result/error属性获取结果在 Web Worker 内可使用FileReaderSync做同步读取若目标只是展示或下载优先考虑URL.createObjectURL(file)而非读取文件内容若目标是上传fetch/XMLHttpRequest可直接接受File对象。赞分享文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载相关推荐JavaScript教程深入理解File和FileReader对象JavaScript教程深入理解File和FileReader对象 概述 在现代Web开发中处理文件是一个常见需求。JavaScript通过File APIJavaScript教程深入理解File和FileReader对象JavaScript教程深入理解File和FileReader对象 前言 在现代Web开发中处理文件是一个常见的需求。无论是上传用户头像、解析Excel表格文档/教程前端JavaScript教程深入理解File和FileReader对象JavaScript教程深入理解File和FileReader对象 在Web开发中处理文件是一个常见需求。本文将深入探讨JavaScript中的File和F创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考