Cách tải lên tệp bằng jQuery.ajax và FormData

Question

Khi tôi sử dụng XMLHttpRequest, tệp được tải lên chính xác bằng cách sử dụng FormData. Tuy nhiên, khi tôi chuyển sang jQuery.ajax, mã của tôi bị hỏng.

Đây là mã ban đầu làm việc:

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

Dưới đây là thất bại jQuery.ajax nỗ lực của tôi:

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

Tôi đang làm gì sai? Làm thế nào tôi có thể tải tập tin lên một cách chính xác, sử dụng AJAX?

Answer 1

Bạn phải thêm processData:false,contentType:false vào phương pháp của mình, để jQuery không thay đổi tiêu đề hoặc dữ liệu (làm hỏng mã hiện tại của bạn).

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