JavaScript中的FormData类型示例详解_javascript技巧

在 JavaScript 中，FormData 是一个用于构建表单数据的接口，主要用于通过  XMLHttpRequest 或  fetch API  发送表单数据（尤其是文件上传）。它提供了一种方便的方式来处理表单字段（包括文件）的键值对。

看着和Map类型有些相似，因为实现了Symbol[iterator],因此是可迭代对象。

可以通过构造函数直接创建空的 FormData 对象，或者从 HTML 表单元素初始化：

// 方法1：创建空的 FormDataconst 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/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. 注意事项

完整示例：

到此这篇关于JavaScript中的FormData类型示例详解的文章就介绍到这了,更多相关JS中FormData类型内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

上一篇：JavaScript沙箱隔离示例代码javascript技巧

下一篇：JavaScript如何计算两个地理坐标点之间的距