JavaScript 文件处理核心是通过 获取 File 对象，用 FileReader 异步读取（支持文本、DataURL、ArrayBuffer），前端校验类型与大小，再用 FormData 配合 fetch 上传，需注重错误处理与真机测试。
JavaScript 用 File API 处理文件，核心是通过 获取用户选择的文件对象，再用 FileReader 读取内容，或直接上传到服务器。关键不在于“能不能”，而在于“怎么安全、可控、有反馈地做”。
获取文件对象：从 input 元素开始
用户选文件后，input.files 返回一个 FileList（类似数组），每个项都是 File 对象，继承自 Blob，自带 name、size、type、lastModified 等属性。
- 监听
change事件，避免用click或submit间接触发 - 检查
files.length > 0，防止用户取消选择后误操作 - 支持多选？加
multiple属性，但注意 iOS Safari 对多图上传的支持有限
读取文件内容：用 FileReader 控制流程
FileReader 是异步读取的核心，不能直接 return 结果，必须靠事件回调。常用方法有：readAsText()、readAsDataURL()、readAsArrayBuffer()。
- 读文本（如 JSON、CSV）：用
readAsText(file, encoding)，推荐显式传"UTF-8" - 预览图片：用
readAsDataURL(file)，结果可直接赋给 - 处理二进制或上传前处理：用
readAsArrayBuffer()，配合Uint8Array或FileReader.result转换 - 务必监听
onload（成功）、onerror（失败）、onprogress（大文件可显示加载进度）
校验与限制：别全交给后端
前端校验不是为了替代后端，而是提升体验、减少无效请求。
立即学习“Java免费学习笔记（深入）”；
- 类型检查：用
file.type（MIME 类型）或file.name.split('.').pop().toLowerCase()判断扩展名，但注意type可被伪造，仅作提示 - 大小限制：
if (file.size > 5 * 1024 * 1024) { alert('文件不能超过 5MB'); } - 图片尺寸检测（需先读取）：用
readAsDataURL+Image对象 onload 后读取naturalWidth/naturalHeight
上传文件：FormData 是最简方案
不需要引入 axios 或 fetch 封装？原生 fetch + FormData 完全够用，且自动设置正确 Content-Type（multipart/form-data）。
- 创建
const formData = new FormData(); - 追加文件：
formData.append('file', file);，多个文件用相同字段名即可 - 也可附加其他字段：
formData.append('desc', '用户头像'); - 发送：
fetch('/upload', { method: 'POST', body: formData })，不用设 headers - 想监听上传进度？
XMLHttpRequest支持upload.onprogress，fetch目前不支持，需用ReadableStream分块上传（较复杂，一般场景不必要）
基本上就这些。File API 不复杂，但容易忽略错误处理和用户体验细节。真正上线前，记得在真机（尤其安卓微信、iOS Safari）上测一遍文件选择和图片预览是否正常。
