formdata可自动提取表单中所有带name属性的控件值；支持append、set、delete等动态操作；可直接用于fetch/xhr发送请求且自动设置content-type；调试可用entries()或for...of遍历查看内容。
直接用 FormData 构造函数传入表单元素，它会自动提取所有带 name 属性的控件值，包括文本框、选择框、文件输入等，无需手动遍历拼接。
一、基础用法：一键捕获整个表单
只要表单有 id 或能被选中，一行代码就能拿到完整数据：
const form = document.getElementById('myForm');
const data = new FormData(form); // 自动读取所有 name 对应的值
注意：提交按钮（<button type="submit"></button>）的值默认不包含，除非点击触发 submit 事件时才临时加入；若需强制包含，可手动 append。
二、灵活增删字段：支持动态操作
FormData 是可变对象，适合处理非表单控件或运行时补充数据：
-
添加字段：
data.append('username', 'alice')（重复 key 允许多值） -
覆盖字段：
data.set('token', 'abc123')（同名只保留最后一个） -
删除字段：
data.delete('tempId') -
检查是否存在：
data.has('email')
例如上传头像时，把用户 ID 和文件一起打包：
data.append('userId', userId);
data.append('avatar', fileInput.files[0]);
三、发送请求：原生 fetch / XHR 都兼容
FormData 可直接作为 fetch 的 body，浏览器自动设置正确的 Content-Type（multipart/form-data），无需手动配置：
fetch('/api/submit', {
method: 'POST',
body: data // ✅ 直接传入
})
.then(res => res.json());
如果用 XMLHttpRequest，也一样简洁：
const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/submit');
xhr.send(data); // ✅ 自动处理边界和编码
⚠️ 注意：不要手动设置 Content-Type，否则会破坏 multipart 格式，导致后端无法解析。
四、调试与转换：看清实际内容
开发时想确认收集是否正确？两种实用方式：
-
转为数组查看键值对：
Array.from(data.entries())→[['name', 'Tom'], ['file', File{}]] -
遍历打印：
for (let [key, value] of data) { console.log(key, value); }
注意：File 对象不会显示路径（出于安全限制），但存在且可正常上传。
不复杂但容易忽略：确保表单控件都有 name 属性，否则 FormData 会跳过它；禁用（disabled）的控件也不会被收集。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
