Как загрузить файл, используя jQuery.ajax и FormData - PullRequest
Новая
       19

Как загрузить файл, используя jQuery.ajax и FormData

57 голосов
/ 08 марта 2012

Когда я использую 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?

1 Ответ

166 голосов
/ 08 марта 2012

Вы должны добавить 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
       }
    });
}
...