JavaScript中的FormData类型示例详解

文章主要介绍了JavaScript中FormData类型的相关资料,JavaScript中的FormData接口用于构建和发送表单数据(尤其适合文件上传),文中通过代码介绍的非常详细,需要的朋友可以参考下。

前言：

在 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. 注意事项

1. 文件上传：FormData 是上传文件的推荐方式，支持多文件（files[0], files[1]...）。
2. Content-Type：浏览器会自动设置 Content-Type: multipart/form-data 并附加边界参数，无需手动指定。
3. 兼容性：现代浏览器均支持 FormData，但在旧版 IE 中可能需要 polyfill（如 formdata-polyfill）。

完整示例：

<form id="myForm">
    <input type="text" name="username" placeholder="Username">
    <input type="file" name="avatar">
    <button type="submit">Submit</button>
</form>
 
<script>
    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);
      }
    });
</script>

总结 

到此这篇关于JavaScript中的FormData类型示例详解的文章就介绍到这了，更多相关JS中FormData类型内容请或继续浏览下面的相关文章！