如何使用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

       }

    });

}  

Answer 2

它是一个Blob或File对象，例如，因为<input type="file" id="filechooser">它是document.getElementById('filechooser').files[0]（假设用户已选择一个文件）。（在jQuery中$('#filechooser')[0].files[0]）