HTML5 File API 是现代浏览器处理本地文件的核心能力，支持读取、预览、校验与分片上传；关键在于合理使用 File/FileList、FileReader、分片上传、进度控制及用户体验优化。
HTML5 File API 是现代浏览器中处理本地文件的核心能力，它让前端可以直接读取、预览、校验甚至分片上传文件，无需依赖 Flash 或其他插件。构建高性能文件上传模块，关键不在于堆砌功能，而在于合理利用 File API 的核心接口，配合进度控制、错误处理与用户体验优化。
File 和 FileList：获取文件的起点
用户通过 <input type="file"> 选择文件后，event.target.files 返回一个 FileList 对象——它类似数组但不可遍历（需转为数组），其中每个项都是 File 实例，继承自 Blob，自带 name、size、type 和最后修改时间等元信息。
- 用
Array.from(input.files)或扩展运算符[...input.files]转为真数组，便于 map/filter 操作 - 注意多选时可能包含目录（Safari 不支持）、重复文件或空项，建议校验
file.size > 0 -
file.webkitRelativePath可获取拖拽文件夹时的相对路径（Chrome/Edge 支持），用于还原目录结构
FileReader：安全预览与内容解析
FileReader 是异步读取文件内容的唯一标准方式，支持 readAsText、readAsDataURL、readAsArrayBuffer 等方法。它不直接暴露原始二进制，而是通过事件回调传递结果，避免阻塞主线程。
- 图片预览优先用
readAsDataURL，生成 base64 字符串赋给<img src>；大图建议改用createObjectURL（更省内存） - 文本类文件（如 JSON、CSV）用
readAsText，指定编码（如UTF-8）防止乱码 - 需要计算哈希或分片上传时，用
readAsArrayBuffer获取底层字节，再交由crypto.subtle.digest()或自定义切片逻辑处理
分片上传与断点续传：提升大文件鲁棒性
单次上传大文件易失败且无法感知进度。分片上传将文件切为固定大小块（如 2MB），逐个上传并记录已传块索引，失败时仅重传当前块，服务端按顺序合并。
立即学习“前端免费学习笔记（深入）”；
- 用
file.slice(start, end)提取 Blob 片段（注意兼容性：旧版需用webkitSlice） - 每个分片携带唯一标识（如文件 hash + 分片序号），服务端据此去重、排序、校验完整性
- 上传前可先发 HEAD 请求检查该分片是否已存在，实现秒传；上传完成后触发合并请求
进度反馈与用户体验细节
上传过程中的实时反馈直接影响用户信任感。原生 XMLHttpRequest.upload 或 fetch + ReadableStream（较新）都支持监听进度。
- 用
xhr.upload.onprogress获取已上传字节数，结合总大小计算百分比；注意移动端可能不触发中间进度，需降级为“开始/完成”两态 - 禁用上传按钮并显示加载状态，同时允许取消（调用
xhr.abort()或AbortController） - 上传成功后提供清晰结果提示（如缩略图、下载链接），失败时展示具体原因（网络中断、格式不符、服务端限流等）并支持重试
不复杂但容易忽略。真正高性能的上传模块，不是追求极限速度，而是让每一次选择、预览、上传、失败、重试都稳定可控、可预期、有反馈。
