JavaScript 文件上传核心是用 FormData 配合 fetch/XHR 实现异步上传：选文件→获 File 对象→建 FormData 并 append→发请求；FormData 自动处理 multipart/form-data 编码，无需手动设 Content-Type。
JavaScript 处理文件上传的核心在于绕过传统表单提交，改用 XMLHttpRequest 或 fetch 发起异步请求，而 FormData 正是连接前端文件选择与后端接收的关键桥梁——它自动处理二进制数据的编码、边界生成和字段组织，省去手动拼接 multipart/form-d
ata 的复杂逻辑。
如何用 JavaScript 实现文件上传
基本流程是：用户通过 选择文件 → 获取 File 对象 → 构建 FormData 实例并追加文件 → 使用 fetch 或 XMLHttpRequest 发送请求。
- 监听文件输入变化：
input.addEventListener('change', (e) => { const file = e.target.files[0]; }) - 创建 FormData 并添加文件：
const formData = new FormData(); formData.append('upload', file);（'upload' 是后端预期的字段名） - 发起请求（fetch 示例）：
fetch('/api/upload', { method: 'POST', body: formData }) - 注意：不要设置
Content-Type请求头，浏览器会自动设置为multipart/form-data; boundary=...，手动设置反而会导致服务端解析失败
为什么 FormData 能简化上传过程
FormData 封装了 multipart/form-data 协议的底层细节，让开发者无需关心分隔符（boundary）、字段格式、二进制转义等繁琐操作。
- 自动识别 File/Blob 类型，按规范序列化为二进制块，并插入正确的 boundary 和头部信息（如
Content-Disposition: form-data; name="upload"; filename="a.jpg"） - 支持混合添加文本字段：
formData.append('title', '我的图片');，文本与文件可共存于同一请求中 - 兼容性好，从 IE10+ 到现代浏览器均支持；配合
fetch或XMLHttpRequest.upload还能轻松实现进度监听 - 避免常见错误：比如用 JSON 字符串传文件（不支持二进制）、手动构造请求体（易出错且不可靠）、忘记删除 Content-Type 头等
实用增强技巧
在基础上传之上，可快速加入用户体验优化功能。
- 多文件上传：使用
，遍历e.target.files逐个append，或用formData.append('files[]', file)（取决于后端约定） - 上传进度反馈：用
XMLHttpRequest.upload.onprogress或fetch配合ReadableStream（较新方案），获取已上传字节数 - 预览图片：用
URL.createObjectURL(file)快速生成本地预览链接，无需上传即可展示 - 类型/大小校验：在 append 前检查
file.type.startsWith('image/')或file.size
不复杂但容易忽略。关键不是写多少代码，而是理解 FormData 是浏览器提供的“协议翻译器”——你给它原始文件，它还你标准的 HTTP 文件上传载荷。
