JavaScript FormData

通常，它用于创建一个数据集以将其发送到服务器。FormData 对象是一个数组的数组，其中包含每个元素的数组。

这些数组包含以下三个值

name: 包含字段的名称。

value: 包含字段的值，它可以是字符串或 Blob 对象。

filename: 包含文件名，这是一个保存名称的字符串。当 Blob 对象作为第二个参数传递时，名称将保存在服务器上。

为什么使用 FormData？

HTML 表单元素的设计会自动捕获其字段和值。在这种情况下，FormData 接口帮助我们发送包含或不包含文件以及额外字段的 HTML 表单。

它是一个包含用户输入的表单数据的对象。

下面是表单数据构造函数

FormData 对象可以被 fetch 等网络方法作为主体接受。它默认会被编码并以 Content-Type: multipart/form-data 的形式发送出去。

服务器会将其视为常规的表单提交。

让我们来看一个发送 FormData 的简单示例。

发送基本 FormData

在下面的表单中，我们向服务器发送一个简单的 FormData。

Index.html

在上面的示例中，我们没有设置任何后端 API 来发送数据，因为这超出了本教程的范围。但是，我们可以检查网络选项卡中的有效负载，从而理解 FormData 接口的工作原理。

所以，如果我们查看开发者工具中的网络请求，它将显示以下有效负载

在上面的网络请求中，表单数据通过 FormData 对象在网络上传输。换句话说，我们需要指定多种方法才能从表单中获取数据。

因此，使用 FormData 接口，我们可以轻松地将 formData 发送到服务器。这只需要一行代码。

FormData 构造函数

FormData() 构造函数用于创建一个新的 FormData 对象。它可以用以下方式使用

参数

form (可选)

这是一个 HTML 元素；如果指定了，FormData 对象将被填充表单当前的键/值对。它使用每个元素的 name 属性作为键，并使用它们提交的值作为值。它还对文件输入内容进行编码。

submitter (可选)

submitter 按钮是表单的一个元素。如果 submitter 元素具有 name 属性，则其数据将包含在 FormData 对象中。

FormData 方法

FormData 提供了几种有用的方法，可以帮助访问和修改表单字段数据。

在少数情况下，我们可能需要在将表单数据发送到服务器之前对其进行更改。这些方法在这些情况下很有帮助。

以下是一些有用的 formData 方法

formData.append(name, value)

它接受 name 和 value 作为两个参数，并添加一个具有指定名称和值的表单字段对象。

formData.append(name, blob, fileName)

它接受 name、blob 和 fileName 参数。如果 HTML 元素是 ，则它会向表单数据对象添加一个字段，第三个参数 fileName 会根据用户文件系统中的文件名设置文件名。

formData.delete(name)

它接受一个 name 作为参数，并删除具有相同名称的指定字段。

formData.get(name)

它也接受一个 name 作为参数，并获取具有给定名称的指定字段的值。

formData.has(name)

它也接受 name 作为参数，检查具有给定名称的字段是否存在，如果存在则返回 true，否则返回 false。

一个表单可以有多个同名字段，因此我们需要指定多个 append 方法来添加所有这些同名字段。

但是同名字段会导致错误并在数据库中设置时产生复杂性。因此，formData 提供了另一个语法与 append 相同的方法，但它会删除所有具有给定名称的字段，然后添加一个新字段。这样，它就能确保有一个唯一的名称键。

在 set 方法中，语法与 append 方法相同。

如何迭代 FormData？

FormData 提供了一个 FormData.entries() 方法来迭代其所有键。此方法返回一个迭代器，该迭代器遍历 FormData 中的所有键/值对。键是字符串对象，而值可以是 blob 或字符串。

考虑下面的示例

上述示例的输出将是

key1, value1
key2, value2

发送带文件数据的表单

文件也可以使用 FormData 发送。文件在表单元素上工作，并以 Content-Type: multipart/form-data 的形式发送。multipart/form-data 编码允许发送文件。所以，默认情况下， 是表单数据的一部分。我们可以通过 form-data 编码将文件发送到服务器。

考虑下面的示例

在上面的示例中，image 对象以二进制格式通过 FormData 发送。我们可以在开发者工具的网络选项卡中查看它

将表单数据作为 Blob 对象发送

将表单数据作为 blob 对象发送是发送动态生成的二进制数据的简单方法。它可以是任何图像或 blob，我们可以直接将其传递到 fetch 主体中发送到服务器。

发送图像数据和其他表单数据（如姓名、密码等）非常方便。此外，服务器更乐于接受 multipart 编码的表单，而不是二进制数据。

考虑下面的示例，它将图像以及其他表单数据作为表单一起发送。

在上面的示例中，我们可以看到图像 blob 添加如下

formData.append("image", imageBlob, "image.png");

这与 相同，并且用户从文件系统中提交了一个名为 "image.png" 的文件，其中包含一些数据 imageBlob。服务器将像正常的表单数据一样读取它。