formData.append

最新推荐文章于 2024-06-17 16:59:01 发布

爱玩盲僧的程序员

最新推荐文章于 2024-06-17 16:59:01 发布

阅读量1.6k

点赞数 11

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/qq_44080018/article/details/135017379

版权

本文解释了formData.append在JavaScript中的作用，如何将文本输入和文件数据添加到FormData对象，以及如何通过XMLHttpRequest发送到服务器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近群里遇到小伙伴在问formData.append的问题，因为之前没怎么接触过，现在正好有时间去学习一下

formData.append是一个用于向FormData对象添加键值对的方法。它接受两个参数，第一个参数是键名，第二个参数是键值。

使用formData.append可以将键值对添加到FormData对象中，这样可以方便地将数据以键值对的形式发送到服务器。

例如，假设我们有一个表单，其中包含一个文本输入框和一个文件上传框。我们可以使用formData.append来将这些输入框的值添加到FormData对象中，然后将其发送到服务器。

示例代码如下：

```javascript
// 创建一个FormData对象
var formData = new FormData();

// 添加文本输入框的值
var name = document.getElementById('name').value;
formData.append('name', name);

// 添加文件上传框的值
var fileInput = document.getElementById('file');
var file = fileInput.files[0];
formData.append('file', file);

// 发送FormData对象到服务器
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.send(formData);
```

在上面的例子中，我们首先创建了一个FormData对象。然后，通过formData.append方法，将文本输入框的值和文件上传框的值添加到FormData对象中。最后，我们使用XMLHttpRequest对象将FormData对象发送到服务器。

需要注意的是，formData.append方法可以多次调用，以添加多个键值对到FormData对象中。在发送FormData对象之前，可以使用console.log(formData)来查看FormData对象的内容，以确保数据被正确添加。

总结起来，formData.append是一个用于向FormData对象添加键值对的方法，它可以方便地将数据以键值对的形式发送到服务器。