Cómo subir un archivo usando jQuery.ajax y FormData

Question

Cuando uso XMLHttpRequest, un archivo se carga correctamente usando FormData. Sin embargo, cuando cambio al jQuery.ajax, mi código se rompe.

Este es el código original de trabajo:

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

Aquí está mi intento fallido jQuery.ajax:

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

¿Qué estoy haciendo mal? ¿Cómo puedo hacer que el archivo se cargue correctamente, usando AJAX?

Answer 1

Tiene que agregar processData:false,contentType:false a su método, de modo que jQuery no altere los encabezados o datos (lo que rompe su código actual).

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