使用 FormData 构造函数传入表单元素可自动收集带 name 属性的控件值，支持文本、选择框、文件等，禁用字段被忽略；可通过 append/set/delete 动态操作数据；配合 fetch 发送时自动设置 multipart/form-data 头，无需手动配置。
直接用 FormData 构造函数传入表单元素，它会自动提取所有带 name 属性的控件值，包括文本框、选择框、文件输入等，无需手动遍历。
从 HTML 表单创建 FormData 对象
最常用也最省事的方式：把 <form> 元素作为参数传给 new FormData()。
- 确保每个要提交的表单控件都有
name属性，否则不会被收集 - 支持
<input type="text">、<select>、<textarea>、<input type="checkbox"/>（勾选才包含）、<input type="radio"/>（仅选中的值）、<input type="file"/>（文件对象） - 禁用（
disabled）的字段会被自动忽略
示例：
<form id="myForm"><input name="username" value="Alice">
<select name="role"><option value="admin">Admin</option></select>
<input type="file" name="avatar">
</form>
const form = document.getElementById('myForm');
const data = new FormData(form); // 自动读取全部有效字段
手动添加或修改字段值
适用于动态拼装数据、追加额外参数，或覆盖默认值。
立即学习“Java免费学习笔记（深入）”；
-
data.append('key', 'value')：新增字段（同名可多次调用，后端收到数组） -
data.set('key', 'newVal')：设置或替换字段（同名只保留最后一个） -
data.delete('key')：移除字段 - 可以 append 文件对象：
data.append('file', fileInput.files[0])
常见用途：上传时加 token、版本号，或合并多个表单片段。
配合 fetch 发送数据（自动处理 Content-Type）
直接把 FormData 实例传给 fetch 的 body，浏览器会自动设置 Content-Type 为 multipart/form-data 并生成边界（boundary），无需手动配置。
- 适合上传文件 + 文本混合提交
- 后端接收方式与普通表单提交一致（如 Express 中用
multer，PHP 中用$_POST和$_FILES） - 注意：不能在 headers 中手动设置
Content-Type，否则会破坏 boundary
示例：
fetch('/api/submit', {method: 'POST',
body: data // 不要加 headers: {'Content-Type': ...}
});
检查和调试 FormData 内容
开发时想确认数据是否正确？FormData 本身不可直接打印，但有几种实用方法：
for (let [key, value] of data.entries()) { console.log(key, value); }-
Array.from(data.keys())或Array.from(data.values()) - Chrome/Firefox 控制台中输入
data，展开查看（部分版本支持可视化） - 转成普通对象方便调试（仅限字符串值，文件对象会丢失）：
Object.fromEntries(new FormData(form))
