FormData 介绍和使用

news2025/4/19 18:05:46

FormData 是 JavaScript 中用于处理表单数据的接口。它提供了一种简单的方式来构建和发送表单数据，表单数据以键值对的形式向服务器发送，这个过程是浏览器自动完成的。但是有时候，我们希望通过脚本完成这个过程，构造或编辑表单的键值对，然后通过脚本发送给服务器。浏览器原生提供了 FormData 对象来完成这项工作。

一、创建一个FormData对象

var fd = new FormData()

2.使用 append() 方法添加表单字段和值

var fd = new FormData()

fd.append("name", "张三丰")

fd.append("age", 180)

3.表单包含文件上传


var file = document.getElementById('file')

var file = file.files[0]

fd.append('file', file)

二、FormData 方法有哪些

通过浏览器控制台打印，我们可以看到FormData有以下方法


1.使用 append() 方法添加字段和值
  
  var fd = new FormData()
  
  fd.append("name", "张三丰")

  fd.append("age", 180)


2.使用 set() 方法设置字段的值，如果字段已存在，则替换现有的值

  var fd = new FormData()

  fd.set("address", "湖北省武当山")


3.使用 get() 方法获取指定字段的第一个值

  var fd = new FormData()

  fd.get("name") // 张三丰


4.使用 getAll() 方法获取指定字段的所有值，返回一个数组
  
  var fd = new FormData()

  fd.getAll("name")  // ['张三丰']


5.使用 delete() 方法删除指定的字段

  var fd = new FormData()

  fd.delete("address")


6.使用 has() 方法检查指定字段是否存在

  var fd = new FormData()

  fd.has("name")  // true
  

7.使用 entries() 方法遍历 FormData 对象的键值对
  
  var fd = new FormData()

  for (var entry of fd.entries()) {
      var name = entry[0]
      var value = entry[1]

      console.log(name + ': ' + value)
      // 输出 name: '张三丰', age: 180, address: '湖北省武当山'
  }

方法名	描述
append()	向 FormData 对象添加一个字段和对应的值。
delete()	从 FormData 对象中删除指定的字段。
get()	获取指定字段的第一个值。
getAll()	获取指定字段的所有值，返回一个数组。
has()	检查 FormData 对象中是否存在指定字段。
set()	设置指定字段的值，如果字段已存在，则替换现有的值。
entries()	返回一个迭代器对象，用于遍历 FormData 对象的键值对。
forEach()	遍历 FormData 对象的每个键值对，并执行指定的回调函数。
keys()	返回一个迭代器对象，用于遍历 FormData 对象的键。
values()	返回一个迭代器对象，用于遍历 FormData 对象的值。
Symbol.iterator	返回一个迭代器对象，用于遍历 FormData 对象的键值对。

三、FormData 的作用

主要用途	描述
表单数据的构建	动态地构建表单数据，通过使用 `append()` 方法将字段名称和对应的值添加到 FormData 对象中。
文件上传	处理文件上传，将文件对象作为值传递给 `append()` 方法，将文件字段添加到 FormData 对象中。
AJAX 请求发送	与 XMLHttpRequest 或 fetch API 结合使用，发送包含 FormData 对象的 AJAX 请求，以将表单数据发送给服务器。
多部分表单数据	处理包含多个部分的表单数据，例如文件字段和文本字段的组合。FormData 提供一种统一的方式来处理和发送这些多部分的表单数据。
动态字段处理	根据需要动态添加或删除表单字段，适用于动态表单或根据用户交互添加字段的场景。