前言：
在 JavaScript 中，FormData 是一个用于构建表单数据的接口，主要用于通过 XMLHttpRequest 或 fetch API 发送表单数据（尤其是文件上传）。它提供了一种方便的方式来处理表单字段（包括文件）的键值对。
FormData类型数据的结构：
看着和Map类型有些相似，因为实现了Symbol[iterator],因此是可迭代对象。
1. 创建 FormData 对象
可以通过构造函数直接创建空的 FormData 对象，或者从 HTML 表单元素初始化：
// 方法1：创建空的 FormData
const formData = new FormData();
// 方法2：从 HTML 表单初始化（自动包含表单的所有字段）
const formElement = document.querySelector('form');
const formDataFromForm = new FormData(formElement);
2. 添加数据到 FormData
使用 append() 方法添加字段（支持多次添加同名键）：
const formData = new FormData();
// 添加文本字段
formData.append('username', 'JohnDoe');
formData.append('age', '25');
// 添加文件（通过文件输入框获取）
const fileInput = document.querySelector('input[type="file"]');
if (fileInput.files.length > 0) {
formData.append('avatar', fileInput.files[0]); // 'avatar' 是字段名
}
// 可以添加多个同名键（如多选框）
formData.append('hobbies', 'reading');
formData.append('hobbies', 'gaming');
3. 发送 FormData 到服务器
通过 fetch 或 XMLHttpRequest 发送数据：
使用 fetch API
fetch('/api/upload', {
method: 'POST',
body: formData, // 直接传递 FormData 对象
// 注意：不要手动设置 Content-Type，浏览器会自动添加 multipart/form-data
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
使用 XMLHttpRequest
const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/upload');
xhr.onload = function() {
if (xhr.status === 200) {
console.log('Upload success:', xhr.responseText);
}
};
xhr.send(formData);
4. 读取 FormData 内容
虽然 FormData 主要用于发送数据，但也可以通过以下方式读取内容：
// 遍历所有字段
for (const [key, value] of formData.entries()) {
console.log(key, value);
}
// 获取单个字段的值（仅第一个）
const username = formData.get('username');
// 检查字段是否存在
const hasAge = formData.has('age');
5. 注意事项
-
文件上传：
FormData是上传文件的推荐方式，支持多文件（files[0],files[1]…）。 -
Content-Type：浏览器会自动设置
Content-Type: multipart/form-data并附加边界参数，无需手动指定。 -
兼容性：现代浏览器均支持
FormData，但在旧版 IE 中可能需要 polyfill（如formdata-polyfill）。
完整示例：
document.getElementById(‘myForm’).addEventListener(‘submit’, async (e) => {
e.preventDefault();
const formData = new FormData(e.target);
formData.append(‘username’, ‘some data’); ///测试append方法添加同名键
console.log(‘FormData:’, formData);
for (const [key, value] of formData) {
console.log(key, value)
}
try {
const response = await fetch(‘/api/upload’, {
method: ‘POST’,
body: formData,
});
const result = await response.json();
console.log(‘Success:’, result);
} catch (error) {
console.error(‘Error:’, error);
}
});
总结
到此这篇关于JavaScript中的FormData类型示例详解的文章就介绍到这了,更多相关JS中FormData类型内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部！
