关于javascript：如何使用jQuery.ajax和FormData上传文件


How to upload a file using jQuery.ajax and FormData

当我使用XMLHttpRequest时，使用FormData正确上传文件。 但是，当我切换到jQuery.ajax时，我的代码中断了。

这是工作原始代码：

1
2
3
4
5
6
7
function uploadFile(blobFile, fileName) {
    var fd = new FormData();
    fd.append("fileToUpload", blobFile);
    var xhr = new XMLHttpRequest();
    xhr.open("POST","upload.php", true);
    xhr.send(fd);
}

这是我不成功的jQuery.ajax尝试：

1
2
3
4
5
6
7
8
9
function uploadFile(blobFile, fileName) {
    var fd = new FormData();
    fd.append("fileToUpload", blobFile);
    var xm = $.ajax({
        url:"upload.php",
        type:"POST",
        data: fd,
    });
}

我究竟做错了什么？ 如何使用AJAX正确上传文件？

您必须将processData:false,contentType:false添加到您的方法中，以便jQuery不会更改标头或数据(这会破坏您当前的代码)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function uploadFile(blobFile, fileName) {
    var fd = new FormData();
    fd.append("fileToUpload", blobFile);

    $.ajax({
       url:"upload.php",
       type:"POST",
       data: fd,
       processData: false,
       contentType: false,
       success: function(response) {
           // .. do something
       },
       error: function(jqXHR, textStatus, errorMessage) {
           console.log(errorMessage); // Optional
       }
    });
}
相关讨论