最自然、最兼容的方案是使用 FormData 配合 fetch 或 XMLHttpRequest；它自动收集带 name 的表单字段（含文件）、无需手动拼接或设 Content-Type，浏览器自动设置 multipart/form-data 及 boundary，后端需启用 multipart 解析且字段名严格匹配。
JavaScript 中用 Ajax 提交表单时，FormData 是最自然、最兼容的方案——它能自动处理文件上传、正确编码字段，且无需手动拼接字符串或设置 Content-Type。
创建 FormData 并填充数据
可以直接从表单 DOM 元素构造 FormData，它会自动收集所有带 name 属性的控件（包括 input[type=file]）：
const form = document.querySelector('#myForm');
const formData = new FormData(form);
也可以手动添加字段，适合动态构建或补充数据：
formData.append('username', 'Alice');-
formData.append('avatar', fileInput.files[0]);（支持 Blob/File） - 同名字段可多次
append，后端收到的是数组（如多选文件）
用 fetch 发起 Ajax 请求
fetch 是现代首选。传入 FormData 实例即可，浏览器会自动设置正确的 Content-Type（含 boundary）：
立即学习“Java免费学习笔记（深入）”；
fetch('/api/submit', {
method: 'POST',
body: formData // 不要设 headers: {'Content-Type': ...}，会破坏 boundary
}).then(res => res.json())
.then(data => console.log(data));
注意：不要手动设置 Content-Type，否则 multipart boundary 会丢失，导致后端解析失败。
用 XMLHttpRequest 提交（兼容旧环境）
老项目仍可能用 XMLHttpRequest，用法类似：
const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/submit');
xhr.onload = () => {
if (xhr.status === 200) {
console.log(JSON.parse(xhr.responseText));
}
};
xhr.send(formData); // 同样不要 setRequestHeader
它也自动处理 multipart 编码，send() 直接传 formData 即可。
后端接收注意事项
后端框架通常有专用方法解析 multipart 表单：
- Node.js（Express + multer）：
multer().single('avatar')或multer().fields([...]) - PHP：
$_POST和$_FILES自动可用 - Python（Flask）：
request.form.get('username')、request.files.get('avatar')
确保后端接口明确支持 multipart/form-data 类型，而非只接受 JSON。
