HTML5怎样用FileReader读取本地文件数据_HTML5FileReader读文件法【指南】

FileReader 必须由用户触发（如 input[type=file] 的 change 事件）且异步使用，不能自动读取或同步获取结果；需通过 Event.target.files[0] 获取 File 实例，监听 onload/onError 处理结果，每次读取需新建实例。

FileReader 读取本地文件前必须有用户触发操作

浏览器禁止脚本自动读取用户本地文件，FileReader 只能在用户主动选择文件后使用，比如 的 change 事件里调用。直接 new FileReader() 后立刻 readAsText() 会失败——因为没文件对象。

• 必须通过 event.target.files[0] 获取 File 实例，它是 Blob 的子类
• FileReader 是异步的，不能像 node.js 的 fs.readFileSync 那样直接返回内容
• 不要在页面加载时就初始化 FileReader 并等待，它不监听文件系统变化

readAsText() 和 readAsArrayBuffer() 选哪个？

取决于你要处理的数据类型：readAsText() 适合纯文本（jsON、csv、日志等），默认按 UTF-8 解码；readAsArrayBuffer() 返回原始二进制，适合图片解析、音频头信息提取或后续转 Uint8Array 处理。

• 如果文件编码不是 UTF-8（比如 GBK 的中文文本），readAsText(file, "GBK") 会报错——浏览器只支持 UTF-8、US-ASCII 和 ISO-8859-1
• 读大文件（>100MB）时，readAsArrayBuffer() 内存占用更可控，避免字符串转义开销
• 想读取图片宽高但不渲染？用 readAsArrayBuffer() + new Uint8Array(buffer) 解析 JPEG/PNG 头部即可

监听 onload 和 onerror 是必须的，不能只靠 try/catch

FileReader 的方法不抛异常，错误全走 onerror 回调，且 error 对象只有 code 字段（如 FileReader.NOT_FOUND_ERR 已废弃，实际是数字码 1–5）。漏掉监听会导致静默失败。

const reader = new FileReader(); reader.onload = function() {   console.log("内容：", this.result); // this 指向 reader }; reader.onerror = function() {   console.error("读取失败，code =", this.error.code); }; reader.readAsText(file);

• this.result 在 onload 中才有效，onloadstart 或 onprogress 里是 undefined
• 重复调用 readAsXXX() 会中止前一次读取，不会排队
• chrome 中若文件被其他进程锁定（如 excel 正在编辑），error.code 通常是 2（FileReader.ABORT_ERR）

读取完成后 reader 不能复用，每次都要 new

一个 FileReader 实例只能执行一次读取操作。调用 readAsText() 后再调用一次，会触发 onerror 且 error.code === 0（NOT_READABLE_ERR），文档未明说但实测如此。

立即学习“前端免费学习笔记（深入）”；

• 不要把 reader 做成全局变量反复用，应在每次 change 事件里 new FileReader()
• 如果要连续读多个文件，用循环 + 闭包，或 for...of 配合 async/await（需封装 promise）
• 内存泄漏风险：忘了移除 onload 引用？现代浏览器 GC 通常能回收，但绑定到全局对象上容易出问题

FileReader 的核心限制其实就两条：必须用户触发、必须异步处理。很多人卡在没等 onload 就去取 result，或者以为能像服务器读文件一样同步拿内容——这两点绕不开，得接受。