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