formdata 构造函数传入表单元素可自动收集所有带 name 属性的字段(含 file),fetch 提交时无需设 headers,禁用字段和未勾选复选框不被包含,兼容主流浏览器。

直接用 FormData 构造函数传入表单元素,它会自动收集所有带 name 属性的字段(包括 input、textarea、select、file),无需手动遍历。
创建 FormData 并自动采集数据
确保表单元素有 id 或能被选中,且每个可提交字段都有 name 属性:
- HTML 中写好
<form id="myForm"></form>,内部字段如<input name="username">、<select name="role"></select> - JS 中用
new FormData(document.getElementById('myForm'))一键获取全部键值对 - 文件字段(
<input type="file">)也会被正确包含,无需额外处理
用 fetch 异步提交(推荐)
fetch 原生支持 FormData,会自动设置正确的 Content-Type: multipart/form-data(含边界符),后端可直接解析:
- 不用手动设 headers,否则反而会出错(尤其不能显式设置
Content-Type) - 示例代码:
const form = document.getElementById('myForm');
const data = new FormData(form);
fetch('/api/submit', { method: 'POST', body: data })
.then(res => res.json())
.then(console.log);
兼容性与注意事项
FormData 在现代浏览器中完全可用(Chrome 7+、Firefox 4+、Edge 12+、Safari 5.1+),但需注意:
- 禁用字段(
disabled)不会被收集,这是标准行为 - 复选框(
checkbox)未勾选时不会出现在FormData中,后端需按“不存在即为 false”处理 - 若需额外参数(如 token),用
data.append('token', 'xxx')追加即可











