什么是new FormData()

new FormData()

new FormData() 是一个 Web API，用于创建一个表示 HTML 表单数据的对象，方便在使用 XMLHttpRequest 或 Fetch API 进行异步请求时发送表单数据。FormData 对象可以方便地处理文件上传和其他复杂的表单数据操作。下面是详细的解释和使用示例：

基本用法

FormData 构造函数可以创建一个空的 FormData 对象或从现有的 <form> 元素中提取数据来初始化。

创建空的 FormData 对象

let formData = new FormData();

从表单元素创建 FormData 对象

<form id="myForm">
  <input type="text" name="username" value="JohnDoe">
  <input type="file" name="profilePic">
</form>

<script>
  let form = document.getElementById('myForm');
  let formData = new FormData(form);
</script>

常用方法

FormData 对象提供了一些方法来操作数据：

append()

用于向 FormData 对象添加一个键值对。如果键已经存在，则追加新的值。

formData.append('username', 'JohnDoe');
formData.append('profilePic', fileInput.files[0]); // 假设 fileInput 是一个 <input type="file"> 元素

set()

用于设置一个键值对。如果键已经存在，则覆盖其值。

formData.set('username', 'JaneDoe');

delete()

用于删除指定的键及其对应的值。

formData.delete('username');

get()

用于获取指定键的第一个值。

let username = formData.get('username');

getAll()

用于获取指定键的所有值。

let allUsernames = formData.getAll('username');

has()

用于检查 FormData 对象中是否存在指定的键。

let hasUsername = formData.has('username');

entries()

返回一个迭代器，可以用来遍历 FormData 对象中的所有键值对。

for (let pair of formData.entries()) {
  console.log(pair[0] + ': ' + pair[1]);
}

发送 FormData 对象

可以使用 XMLHttpRequest 或 Fetch API 来发送 FormData 对象。下面是一个使用 Fetch API 的示例：

fetch('https://example.com/api/upload', {
  method: 'POST',
  body: formData
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

实际示例

假设你有一个 HTML 表单，需要上传文件和其他数据：

<form id="uploadForm">
  <input type="text" name="username" value="JohnDoe">
  <input type="file" name="profilePic">
  <button type="submit">Upload</button>
</form>

你可以使用以下 JavaScript 代码来处理表单提交并使用 FormData 对象发送数据：

document.getElementById('uploadForm').addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单默认提交

  let form = document.getElementById('uploadForm');
  let formData = new FormData(form);

  fetch('https://example.com/api/upload', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));
});

总结

FormData 对象是处理表单数据，特别是文件上传时非常有用的工具。它简化了构建和发送复杂表单数据的过程，提供了多种方法来操作数据。在实际开发中，结合 Fetch API 或 XMLHttpRequest，可以高效地进行异步数据传输。

标签