Comment télécharger un fichier à l'aide de jQuery.ajax et FormData

Question

Lorsque j'utilise XMLHttpRequest, un fichier est correctement téléchargé à l'aide de FormData. Cependant, lorsque je passe à jQuery.ajax, mon code pauses.

C'est le travail original de code:

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

Voici mon infructueuses jQuery.ajax tentative:

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

Ce que je fais mal? Comment puis-je obtenir le fichier à charger correctement, à l'aide d'AJAX?

Answer 1

Vous devez ajouter processData:false,contentType:false à votre méthode, de sorte que jQuery ne modifie pas les en-têtes ou les données (ce qui casse votre code actuel).

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