什么是new FormData()

new FormData()

new FormData()

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

基本用法

FormData

构造函数可以创建一个空的

FormData

对象或从现有的

<form>

元素中提取数据来初始化。

创建空的 FormData 对象

let formData =newFormData();

从表单元素创建 FormData 对象

<formid="myForm"><inputtype="text"name="username"value="JohnDoe"><inputtype="file"name="profilePic"></form><script>let form = document.getElementById('myForm');let formData =newFormData(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 表单，需要上传文件和其他数据：

<formid="uploadForm"><inputtype="text"name="username"value="JohnDoe"><inputtype="file"name="profilePic"><buttontype="submit">Upload</button></form>

你可以使用以下 JavaScript 代码来处理表单提交并使用

FormData

对象发送数据：

document.getElementById('uploadForm').addEventListener('submit',function(event){
  event.preventDefault();// 阻止表单默认提交let form = document.getElementById('uploadForm');let formData =newFormData(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

，可以高效地进行异步数据传输。