JavaScript FormData: 如何添加参数和上传文件

JavaScript FormData: 如何添加参数和上传文件

使用 FormData 对象可以轻松地创建用于发送 HTTP 请求的表单数据。本文将详细介绍如何使用 FormData 添加参数和上传文件。

添加参数

FormData 对象可以使用 append 方法添加参数。语法如下：

formData.append(name, value);

其中，name 为参数名，value 为参数值。

例如，要添加名为 'username'，值为 'john' 的参数，可以使用以下代码：

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

要添加多个参数，只需多次调用 append 方法即可。例如：

formData.append('username', 'john');
formData.append('age', 30);
formData.append('email', 'john@example.com');

上传文件

要上传文件，需要将文件转换为 Blob 对象，然后使用 append 方法将其添加到 FormData 中。

var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
formData.append('file', file);

以上代码假设页面中有一个 id 为 'fileInput' 的文件选择框，用户选择文件后，该文件将被添加到 FormData 中。

总结

FormData 对象提供了一种简单的方法来创建表单数据，用于发送 HTTP 请求，特别是在处理文件上传时。通过使用 append 方法，可以轻松地添加参数和上传文件。