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

Question

当我使用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来正确上传文件？

Answer 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 
     } 
    }); 
}