JavaScript文件上传与读取分两步：先用FileReader预览用户选择的文件，再用FormData上传。关键限制是JS无法直接访问磁盘，必须通过input[type="file"]由用户触发选择，且需处理进度、错误及安全校验。
JavaScript 实现文件上传和读取主要分两步：前端获取并预览文件（用 FileReader），再通过 FormData 发送到后端。关键在于理解浏览器对本地文件的访问限制——JS 不能直接读磁盘，只能处理用户主动选择的文件对象。
用 input[type="file"] 获取文件
这是起点，必须由用户触发选择操作，不能自动调用 click()（部分浏览器会拦截）：
- HTML 中写：
- JS 监听 change 事件：
fileInput.addEventListener('change', handleFile) -
event.target.files是FileList对象，可转为数组遍历：Array.from(event.target.files)
用 FileReader 读取文件内容（不上传）
适合预览文本、JSON、图片等小文件，注意它只在浏览器内存中处理，不发请求：
- 创建实例：
const reader = new FileReader() - 监听加载完成：
reader.onload = () => console.log(reader.result) - 常用读取方法：
reader.readAsText(file)（文本）、reader.readAsDataURL(file)（Base64 图片）、reader.readAsArrayBuffer(file)（二进制） - 读取大文件时建议用
readAsArrayBuffer配合Blob.slice()分块处理，避免内存溢出
用 FormData 上传文件到服务器
这是实际提交文件的标准方式，兼容性好，支持多文件和额外字段：
立即学习“Java免费学习笔记（深入）”；
- 新建表单数据：
const formData = new FormData() - 添加文件：
formData.append('file', file)（单个）或formData.append('files', file, 'custom-name.jpg')（带自定义名） - 添加其他字段：
formData.append('desc', '用户头像') - 发送请求：
fetch('/upload', { method: 'POST', body: formData })（注意：不要设Content-Type，浏览器会自动设置带 boundary）
上传进度与错误处理
提升用户体验的关键细节：
- 监听上传进度：
fetch本身不支持进度，改用XMLHttpRequest或封装fetch+ReadableStream（较新） - 简单方案：
const xhr = new XMLHttpRequest(); xhr.upload.onprogress = e => { console.log((e.loaded / e.total * 100).toFixed(1) + '%') } - 错误统一捕获：
xhr.onerror、xhr.onload判断xhr.status，同时检查file.size === 0或类型是否符合要求（如file.type.startsWith('image/')）
基本上就这些。核心是理清“选文件 → 读内容（可选）→ 构造数据 → 发请求”的链路，不复杂但容易忽略安全校验和用户体验细节。
