小编典典

如何使用jQuery.ajax和FormData上传文件

javascript

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

这是有效的原始代码:

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尝试:

function uploadFile(blobFile, fileName) {
    var fd = new FormData();
    fd.append("fileToUpload", blobFile);
    var xm = $.ajax({
        url: "upload.php",
        type: "POST",
        data: fd,
    });
}

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


阅读 452

收藏
2020-05-01

共1个答案

小编典典

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

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
       }
    });
}
2020-05-01