JavaScript教程：深入理解FormData对象的使用-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00409/article/details/148574748

JavaScript教程：深入理解FormData对象的使用

ru.javascript.info Современный учебник JavaScript 项目地址: https://gitcode.com/gh_mirrors/ru/ru.javascript.info

什么是FormData对象？

FormData是JavaScript中一个强大的内置对象，专门用于处理HTML表单数据。它提供了一种简单的方式来构造和发送表单数据，包括文本字段和文件上传。在现代Web开发中，FormData已经成为通过AJAX发送表单数据的标准方式。

创建FormData对象

创建FormData对象有两种主要方式：

// 方式1：创建空对象后手动添加字段
let formData = new FormData();

// 方式2：基于现有表单元素创建
let formData = new FormData(formElement);

当基于现有表单创建时，FormData会自动收集表单中的所有字段数据，包括文件输入字段。

基本使用方法

发送简单表单

让我们看一个发送简单文本表单的例子：

<form id="userForm">
  <input type="text" name="username" value="张三">
  <input type="email" name="email" value="zhangsan@example.com">
  <input type="submit" value="提交">
</form>

<script>
  document.getElementById('userForm').onsubmit = async function(e) {
    e.preventDefault();
    
    try {
      let response = await fetch('/api/user', {
        method: 'POST',
        body: new FormData(this)
      });
      
      let result = await response.json();
      console.log('服务器响应:', result);
    } catch (error) {
      console.error('提交出错:', error);
    }
  };
</script>

在这个例子中，当表单提交时，我们阻止了默认的提交行为，改用fetch API发送数据。注意我们直接将FormData对象作为请求体，fetch会自动设置正确的Content-Type头(multipart/form-data)。

FormData的核心方法

FormData提供了一系列方法来操作表单数据：

添加数据

// 添加文本字段
formData.append('key', 'value');

// 添加文件字段
formData.append('file', fileBlob, 'filename.txt');

查询和删除

// 获取字段值
let value = formData.get('key');

// 检查字段是否存在
let exists = formData.has('key');

// 删除字段
formData.delete('key');

设置字段值（会覆盖同名字段）
```
formData.set('key', 'newValue');
```

遍历FormData

你可以使用for...of循环遍历FormData中的所有字段：

for(let [name, value] of formData) {
  console.log(`${name}: ${value}`);
}

高级用法

文件上传

FormData处理文件上传非常简单：

<form id="uploadForm">
  <input type="text" name="description">
  <input type="file" name="document">
  <button type="submit">上传</button>
</form>

<script>
  document.getElementById('uploadForm').onsubmit = async function(e) {
    e.preventDefault();
    
    let formData = new FormData(this);
    
    try {
      let response = await fetch('/api/upload', {
        method: 'POST',
        body: formData
      });
      
      let result = await response.json();
      alert('上传成功: ' + result.fileUrl);
    } catch (error) {
      alert('上传失败: ' + error.message);
    }
  };
</script>

发送Blob数据

有时我们需要发送动态生成的二进制数据（如Canvas绘图）：

async function sendCanvasImage() {
  // 从Canvas获取图像Blob
  let canvas = document.getElementById('myCanvas');
  let imageBlob = await new Promise(resolve => 
    canvas.toBlob(resolve, 'image/jpeg', 0.9));
  
  // 创建FormData并添加字段
  let formData = new FormData();
  formData.append('title', '我的绘图');
  formData.append('image', imageBlob, 'drawing.jpg');
  
  // 发送数据
  let response = await fetch('/api/save-drawing', {
    method: 'POST',
    body: formData
  });
  
  return response.json();
}

注意事项

Content-Type：使用FormData时不需要手动设置Content-Type头，浏览器会自动设置为multipart/form-data并添加必要的boundary参数。
文件命名：当添加Blob/File对象时，第三个参数fileName很重要，它决定了服务器接收到的文件名。
同名字段：FormData允许有多个同名字段，这与HTML表单行为一致。使用append会添加字段，而set会替换所有同名字段。
兼容性：FormData在现代浏览器中有很好的支持，但在非常旧的浏览器中可能需要polyfill。