js new formdata详解|极客笔记

js new formdata详解

1. 简介

FormData是HTML5中新增的一种数据类型，用于在发送AJAX请求时用于构建表单数据。它可以用来模拟表单的提交，也可以用于上传文件。本篇文章主要探讨FormData的使用方法和常见应用场景。

2. FormData的基本使用

在JavaScript中，可以通过new FormData()来创建一个空的FormData对象，并通过append()方法向其中添加数据。

示例代码如下：

var formData = new FormData();
formData.append('name', 'John');
formData.append('age', 25);

上述代码中，我们创建了一个FormData对象formData，并使用append()方法分别向formData中添加了name和age两个字段。这里的name和age就是表单的键名，John和25则是对应的值。

3. 提交FormData数据

一般来说，我们会将FormData对象传递给AJAX请求的data参数来提交数据。

示例代码如下：

var formData = new FormData();
formData.append('name', 'John');
formData.append('age', 25);

$.ajax({
    url: '/submit',
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    success: function(response) {
        console.log(response);
    }
});

在上述代码中，我们使用了jQuery的$.ajax()方法发送了一个POST请求，并将FormData对象作为data进行了提交。需要注意的是，我们通过设置processData和contentType为false来禁用了jQuery的默认处理，确保FormData对象能够正确传输。

4. 上传文件

使用FormData对象可以方便地上传文件。我们只需要将文件input元素的files属性添加到FormData对象中即可。

示例代码如下：

<input type="file" id="fileInput">

<button type="button" onclick="uploadFile()">上传文件</button>

<script>
function uploadFile() {
    var fileInput = document.getElementById('fileInput');
    var file = fileInput.files[0];

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

    // 发送上传文件的请求
    // ...
}
</script>

在上述代码中，我们首先获取了id为fileInput的文件input元素，并通过fileInput.files[0]获取了用户选择的文件。然后，我们创建了一个FormData对象formData，并将文件添加到其中。

5. 获取FormData数据

我们可以通过FormData对象的get()方法获取对应键名的值。

示例代码如下：

var formData = new FormData();
formData.append('name', 'John');
formData.append('age', 25);

console.log(formData.get('name')); // 输出：John
console.log(formData.get('age')); // 输出：25

上述代码中，我们使用get()方法分别获取了name和age字段的值，并通过console.log()打印了出来。

6. 遍历FormData数据

除了使用get()方法，我们还可以使用entries()、keys()和values()方法来遍历FormData对象中的数据。

示例代码如下：

var formData = new FormData();
formData.append('name', 'John');
formData.append('age', 25);

// 使用entries()方法遍历
for (var pair of formData.entries()) {
    console.log(pair[0] + ': ' + pair[1]);
}

上述代码中，我们通过entries()方法遍历了formData对象，并使用console.log()打印了每个键值对。

7. 实际应用场景

7.1 表单提交

当我们需要通过AJAX提交表单数据时，可以使用FormData对象构建表单数据，并通过AJAX请求将其提交到后端。

示例代码如下：

var formData = new FormData(document.getElementById('myForm'));

$.ajax({
    url: '/submit',
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    success: function(response) {
        console.log(response);
    }
});

在上述代码中，myForm是一个表单元素的id属性。我们通过document.getElementById()获取表单元素，并将其传递给FormData的构造函数。然后，通过设置processData和contentType为false，使用Ajax将表单数据提交到后端。

7.2 图片上传

当用户需要上传图片时，可以使用FormData对象将图片文件添加到表单数据中，然后通过AJAX上传至服务器。

示例代码如下：

<input type="file" id="imageInput">
<button type="button" onclick="uploadImage()">上传图片</button>

<script>
function uploadImage() {
    var imageInput = document.getElementById('imageInput');
    var image = imageInput.files[0];

    var formData = new FormData();
    formData.append('image', image);

    $.ajax({
        url: '/upload',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            console.log(response);
        }
    });
}
</script>

在上述代码中，我们通过imageInput.files[0]获取用户选择的图片文件，并将其添加到formData中。然后，通过AJAX请求将formData提交到服务器。