用 input[type="file"] 获取文件对象需监听 change 事件，通过 event.target.files[0]（单文件）或遍历 files（多文件）获取 File 实例；File 继承 Blob，含 name、size 等只读属性，files 是实时快照，替换文件需重新监听 change。
JavaScript 在浏览器中无法直接操作文件系统，File 和 FileReader 是唯二安全、标准的入口；上传必须走 FormData + fetch 或 XMLHttpRequest；预览依赖 URL.createObjectURL()，不是读取内容本身。
怎么用 input[type="file"] 拿到文件对象
用户选择文件后，input 元素的 files 属性返回 FileList（类数组），每个项是 File 实例（继承自 Blob）：
-
File有name、size、type、lastModified等只读属性，不能修改路径或伪造内容 - 单文件上传常用
input.files[0]；多文件需遍历input.files - 若设置
multiple属性但用户只选一个，files.length仍是 1，不会报错 - 注意：
files是实时的“快照”，后续替换文件会更新，但不会触发新事件——得监听change事件重新取
怎样用 FileReader 读取文件内容并预览
预览图片/文本等本地文件，不需要上传服务器也能完成，核心是 FileReader + URL.createObjectURL()：
- 读取图片推荐用
URL.createObjectURL(file)，生成临时 blob URL，赋给<img src>—— 快、不占内存、支持大图 - 读取文本内容（如 JSON、CSV）才用
FileReader.readAsText()，注意指定编码（默认UTF-8） -
FileReader是异步的，必须绑定onload回调取reader.result，别在readAsXXX()后立即访问result - 用完
createObjectURL生成的 URL 后，应调用URL.revokeObjectURL()释放引用，否则可能内存泄漏
如何通过 fetch 上传文件到后端
浏览器上传本质是发送 multipart/form-data 请求，FormData 自动处理边界和编码：
立即学习“Java免费学习笔记（深入）”；
- 创建
FormData实例，用.append('field', file)添加文件；字段名（'field'）要和后端约定一致 - 可追加其他字段，如
form.append('desc', '用户头像')，后端能一并接收 - 直接
fetch('/upload', { method: 'POST', body: form })即可，不用设Content-Type头——fetch会自动设置带 boundary 的 multipart - 如果后端要求 JSON 格式传文件（不推荐），需先用
FileReader.readAsArrayBuffer()转为ArrayBuffer，再转Uint8Array或Base64，但会显著增大体积、增加解析开销
常见错误和兼容性注意点
很多“上传失败”或“预览空白”问题都源于这几个细节：
-
input元素未绑定change事件，或事件回调里没检查event.target.files.length > 0就直接取[0]，导致undefined错误 - 用
FileReader读取大文件时没监听onprogress，用户无反馈；也没处理onerror，静默失败 - 上传图片后端返回成功，但前端没清空
input.value = ''，下次选相同文件不会触发change事件（因为值没变） -
URL.createObjectURL()在 Safari 旧版本或某些 WebView 中对非图片类型支持不稳定，文本/ PDF 预览建议降级为下载或服务端渲染
真正卡住人的往往不是语法，而是这些隐式状态和生命周期管理——比如忘记 revoke、没清空 input、把 blob URL 当作永久地址缓存。动手前先确认你是在读、预览，还是上传，三者路径完全不同。
