当前位置：首页 > news >正文

JavaScript中的FormData类型示例

news 2026/5/11 20:16:57

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');
 
// 检查字段是否存在@www.xuepai.net
const hasAge = formData.has('age');

5. 注意事项

文件上传：FormData 是上传文件的推荐方式，支持多文件（files[0], files[1]...）。
Content-Type：浏览器会自动设置 Content-Type: multipart/form-data 并附加边界参数，无需手动指定。
兼容性：现代浏览器均支持 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'); ///@www.haoshilao.net测试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>