Now formdata是什么?如何使用
FormData 是什么
FormData 是浏览器提供的 JavaScript 对象,用于构造表单数据格式的键值对。它主要用于发送 multipart/form-data 类型的请求,适合上传文件或提交包含二进制数据的表单。FormData 可以动态添加字段,无需手动拼接数据。
使用 FormData 的方法
创建 FormData 对象
const formData = new FormData();
添加字段 通过 append()
方法添加文本或文件数据:
formData.append('username', 'Alice');
formData.append('avatar', fileInput.files[0]); // 文件对象
从表单元素初始化 若页面有 <form>
元素,可直接传入表单 DOM 节点:
const formElement = document.querySelector('form');
const formData = new FormData(formElement);
发送 FormData 数据 通过 fetch
或 XMLHttpRequest
发送:
// 使用 fetch
fetch('/upload', {method: 'POST',body: formData
});// 使用 XMLHttpRequest
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.send(formData);
检查 FormData 内容 使用 entries()
遍历数据:
for (const [key, value] of formData.entries()) {console.log(key, value);
}
注意事项
- 无需设置
Content-Type
请求头,浏览器会自动处理为multipart/form-data
。 - 文件字段需通过
<input type="file">
获取文件对象后添加。 - 支持多次添加同名字段,服务器端可能接收为数组。