添加 FormData JavaScript

在前端开发过程中，通常需要向服务器提交表单数据或文件。而 JavaScript 提供了 FormData API 可以轻松地创建表单数据对象，并且可以在使用 XHR 发送请求时将其与请求一并发送。

创建 FormData 实例

要创建一个 FormData 实例，可以使用以下代码：

const formData = new FormData();

创建了一个空的 FormData 实例，接下来可以添加数据。

添加数据

可以使用 append 方法添加数据到 FormData 对象中。

formData.append('username', 'alice');

在这个例子中，将添加一个名为 username 的键和一个值为 alice 的值。可以多次调用 append 方法添加更多数据。

如果键有重复的情况，值会被添加到同一键名的数组中。

formData.append('fruits', 'apple');
formData.append('fruits', 'bananas');

formData.get('fruits') 将返回一个包含 'apple' 和 'bananas' 的数组。

将数据与请求一并发送

我们可以使用 XHR 对象发送 FormData 对象，以便将数据一并发送。

const xhr = new XMLHttpRequest();
xhr.open('POST', '/submit-form');
xhr.send(formData);

在这个例子中，XHR 对象使用 POST 请求发送 FormData 对象中的所有数据到 /submit-form 地址。服务器将会接收到这个请求，并读取 FormData 中的数据。

总结

FormData API 提供了一种在发送表单数据和文件时，比传统方式更方便的方式。通过 append 方法添加数据，FormData 对象可以包含不同类型和数量的值，并在和 XHR 对象一起使用时，可以轻松地将数据发送到服务器进行处理。