HTML5文件处理以用户授权、沙箱隔离、异步读写为核心，依托FileList获取文件、FileReader按需读取（text/DataURL/ArrayBuffer）、Blob统一二进制操作，并需显式处理错误与边界。
HTML5 文件处理能力不是“能读文件”那么简单，而是围绕用户主动授权、沙箱隔离、异步安全读写这三条主线构建的一整套机制。真正健壮的文件系统工具，必须同时处理好文件获取、内容解析、二进制操作、错误边界和用户体验这五个关键环节。
用户触发是前提：只响应明确选择行为
浏览器严格禁止脚本主动访问本地路径。所有文件操作起点只能是用户显式动作：点击 <input type="file"> 或拖放文件到指定区域。FileList 对象由此生成，它不是数组，但可通过索引访问每个 File 实例。
- 支持多选时用
event.target.files获取全部文件，注意它是只读类数组对象 - 每个
File对象自带name、size、type和lastModified属性，无需额外请求即可校验 - 拖放场景需监听
drop事件，并调用e.preventDefault()阻止默认打开行为
FileReader 是核心枢纽：按需选择读取方式
FileReader 不直接返回内容，而是通过事件驱动异步交付结果。它不缓存数据，也不修改原始文件，仅提供一次性的内存读取通道。不同方法适用于不同场景：
-
readAsText(file, encoding)：适合配置文件、日志、源码等纯文本，encoding 默认为 UTF-8 -
readAsDataURL(file)：快速生成 base64 字符串，常用于图片预览或上传前缩略图渲染 -
readAsArrayBuffer(file)：获取原始二进制视图，配合Uint8Array或DataView进行字节级解析（如解析 PDF 头、校验 PNG 签名） - 读取中可监听
onload、onerror、onprogress，其中onprogress的loaded和total可用于实现进度条
Blob 是通用载体：统一处理二进制与衍生数据
File 继承自 Blob，而 Blob 本身可由字符串、ArrayBuffer、甚至其他 Blob 构造。它是前端文件操作的“通用容器”，不依赖文件来源，只关注数据形态。
立即学习“前端免费学习笔记（深入）”；
- 用
new Blob([data], {type: 'text/csv'})可将 JS 数据转为可下载文件 - 调用
blob.slice(start, end, type)能分片读取大文件，避免内存溢出（如视频帧提取、日志分段分析） - 结合
URL.createObjectURL(blob)可生成临时 URL，用于<img>、<audio>或<a download>下载 - 使用后应调用
URL.revokeObjectURL(url)释放引用，防止内存泄漏
错误与边界必须显式处理
文件操作失败不会抛异常，而是触发 onerror 事件，且错误类型隐含在 reader.error 中。常见问题包括：
- 用户取消选择或未选文件 →
files.length === 0，应前置检查 - 读取超时或中断 → 监听
onabort，并允许用户重试 - 编码不匹配导致乱码 →
readAsText指定正确 encoding（如 GBK 文件需用iconv-lite转换） - 大文件触发内存限制 → 改用流式分块读取 + Web Worker 卸载主线程压力
不复杂但容易忽略
