使用 FormData 追加数据

在开发 Web 应用程序时，我们会经常遇到需要提交表单数据的情况。在 JavaScript 中，我们可以使用 FormData 对象来构建表单数据，然后将其发送到服务器。

FormData 对象

FormData 对象是 JavaScript 中一个用于构建表单数据的 API，它允许我们动态地添加表单字段和值。

示例：

const formData = new FormData();
formData.append('username', 'Alice');
formData.append('password', '123456');

以上代码创建了一个 FormData 对象，然后向其中添加了两个字段：username 和 password。

追加数据

我们可以使用 append() 方法向 FormData 对象中添加数据。此方法接收两个参数：字段名称和字段值。例如：

const formData = new FormData();
formData.append('username', 'Alice');
formData.append('password', '123456');

以上代码向 FormData 对象中添加了两个字段：username 和 password。

我们也可以添加文件或 Blob 对象：

const formData = new FormData();
formData.append('avatar', file);

以上代码添加了一个名为 avatar 的文件字段。

发送表单数据

使用 XMLHttpRequest 对象发送 FormData 对象可以提交表单数据。

示例：

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

以上代码中，我们使用 xhr.send() 方法将构建好的 FormData 对象发送到服务器。如果有任何上传进度事件可以通过 XMLHttpRequest 对象监听。

总结

以上是关于使用 FormData 对象追加数据的介绍。我们可以使用 append() 方法向 FormData 对象中添加字段和值，也可以添加文件或 Blob 对象。然后使用 XMLHttpRequest 对象将构建好的 FormData 对象发送到服务器。