FileReader是HTML5新增API，IE9及以下不支持，仅能读取用户选择或拖入的文件，不可读取任意本地路径；readAsText用于文本解码（可指定编码），readAsDataURL生成Base64 data URL；推荐用URL.createObjectURL替代readAsDataURL以提升性能并避免内存泄漏。
FileReader 是 HTML5 新增的 API，HTML4 及更早版本不支持
HTML4 标准里根本没有 FileReader 这个对象——它属于 HTML5 文件操作 API 的一部分，依赖于 input[type="file"] 或拖放（drop）事件获取的 File 或 Blob 对象。如果你在旧版 IE（如 IE9 及以下）中调用 new FileReader()，会直接报 ReferenceError: FileReader is not defined。
实际开发中要注意：
- 必须检测浏览器支持：
if (typeof FileReader !== 'undefined') { /* 安全使用 */ } -
FileReader不能读取本地文件系统任意路径（比如file:///C:/data.txt），只能读取用户主动选择或拖入的文件（沙箱限制） - 它和
XMLHttpRequest或fetch无关，不发网络请求，纯前端异步读取二进制/文本内容
readAsText 和 readAsDataURL 的行为差异直接影响编码与用途
readAsText 默认按 UTF-8 解码，但可显式传入第二个参数指定编码（如 'GBK'、'ISO-8859-1'），而 readAsDataURL 总是将内容 Base64 编码为 data: URL 字符串，不涉及文本解码逻辑。
常见误用场景：
立即学习“前端免费学习笔记（深入）”；
- 用
readAsText读取图片文件 → 得到乱码字符串（应改用readAsArrayBuffer或readAsDataURL） - 用
readAsDataURL后直接.split(',')取 base64 数据体 → 忽略了 MIME 类型前缀变化（如data:image/png;base64,...），建议用正则或URL.createObjectURL(blob)替代 - 未监听
onloadend就假设result已就绪 →FileReader是异步的，result在onload触发后才可用
IE10+ 与现代浏览器对 abort() 和 error 处理不一致
FileReader.abort() 在 IE10–11 中会触发 onerror，但不会设置 error 属性；而在 Chrome/Firefox 中，abort() 既不会触发 onerror，也不会改变 readyState（保持 2 即 LOADING），仅停止后续处理。
健壮写法需兼顾：
- 始终检查
reader.readyState === FileReader.DONE再取result，而非只依赖onload - 监听
onerror时，先判断是否因abort()引起（例如加个标记变量isAborted） - 避免在
onload中重复调用abort()—— 此时读取已完成，再调无效果且可能干扰状态判断
替代方案：现代项目优先考虑 URL.createObjectURL 而非 FileReader.readAsDataURL
如果目标只是预览图片或播放音频，URL.createObjectURL(file) 比 readAsDataURL 更高效：它不进行 Base64 编码，内存占用更低，且能被 revokeObjectURL 主动释放。
示例对比：
const img = document.createElement('img');
// ❌ 不必要地转成 data URL
const reader = new FileReader();
reader.onload = () => { img.src = reader.result; };
reader.readAsDataURL(file);
<p>// ✅ 推荐：直接创建对象 URL
img.src = URL.createObjectURL(file);
// 后续记得清理：URL.revokeObjectURL(img.src);注意：createObjectURL 返回的是临时 URL，生命周期绑定到文档；若页面长期存在大量文件预览，忘记 revoke 会导致内存泄漏。
