jQuery的ajax中使用FormData实现页面无刷新上传功能

下面是实现jQuery的ajax中使用FormData实现页面无刷新上传功能的完整攻略。

主要步骤

1. 创建一个HTML表单，用于上传文件，表单中包含一个file类型的input元素

```html

上传

```

1. 编写JavaScript代码，使用FormData对象来处理上传的文件，并使用jQuery的ajax方法进行上传

```javascript
$(function() {
$("#uploadForm").submit(function(event) {
// 阻止表单提交的默认行为
event.preventDefault();

       // 创建FormData对象，并将文件添加到其中
       var formData = new FormData();
       formData.append("file", $("input[name='file']").prop("files")[0]);

       // 发送ajax请求上传文件
       $.ajax({
           url: "/upload",
           type: "POST",
           data: formData,
           processData: false,
           contentType: false,
           success: function(response) {
               // 上传成功后的处理
               console.log(response);
           },
           error: function(xhr, status, error) {
               // 上传失败后的处理
               console.error(error);
           }
       });
   });

});
```

代码说明

步骤2中的代码解释如下：

1. 获取表单提交事件，并阻止表单的默认提交行为

javascript
$("#uploadForm").submit(function(event) {
// 阻止表单提交的默认行为
event.preventDefault();
});

1. 创建FormData对象，并将文件添加到其中

javascript
var formData = new FormData();
formData.append("file", $("input[name='file']").prop("files")[0]);

这里首先创建一个FormData对象，然后使用jQuery的prop方法获取表单中name为file的input元素的files属性，即上传的文件，再将其添加到FormData对象中。

1. 发送ajax请求上传文件，其中配置了processData和contentType为false，表示不需要将FormData对象处理为查询字符串，也不需要设置请求头的Content-Type为multipart/form-data

javascript
$.ajax({
url: "/upload",
type: "POST",
data: formData,
processData: false,
contentType: false,
success: function(response) {
// 上传成功后的处理
console.log(response);
},
error: function(xhr, status, error) {
// 上传失败后的处理
console.error(error);
}
});

这里使用了ajax方法向服务器发送POST请求，并传递FormData对象作为数据参数。另外，由于FormData对象是原始数据而非查询字符串，所以需要将processData和contentType设置为false。

示例说明

下面是两条示例说明：

示例1：上传文件并展示上传结果

假设服务器会返回上传结果（如文件上传成功的URL），那么可以在上传成功后展示上传结果。示例如下：

$.ajax({
    url: "/upload",
    type: "POST",
    data: formData,
    processData: false,
    contentType: false,
    success: function(response) {
        // 展示上传结果
        $("#result").html("上传成功，文件URL为：" + response.url);
    },
    error: function(xhr, status, error) {
        console.error(error);
        $("#result").html("上传失败");
    }
});

示例2：限制上传文件的类型和大小

为了保证上传的文件符合要求，可以使用浏览器的File API来限制上传文件的类型和大小。示例如下：

$(function() {
    $("#uploadForm").submit(function(event) {
        event.preventDefault();

        var file = $("input[name='file']").prop("files")[0];
        if (!file) {
            alert("请选择需要上传的文件");
            return;
        }

        if (file.size > 1024 * 1024) {
            alert("文件大小不能超过1MB");
            return;
        }

        var allowedTypes = ["image/jpeg", "image/png", "image/gif"];
        if (allowedTypes.indexOf(file.type) < 0) {
            alert("只能上传图片文件，支持的格式包括jpg、png、gif");
            return;
        }

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

        $.ajax({
            url: "/upload",
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                $("#result").html("上传成功，文件URL为：" + response.url);
            },
            error: function(xhr, status, error) {
                console.error(error);
                $("#result").html("上传失败");
            }
        });
    });
});

这里在提交表单前，首先获取上传的文件，然后判断文件大小是否超过1MB，以及文件类型是否为图片，只有满足条件才允许上传文件。