web-dev-qa-db-ja.com

jQuery.ajaxとFormDataを使用してファイルをアップロードする方法

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を使用して、ファイルを正しくアップロードするにはどうすればよいですか？

javascriptjqueryajaxfile-uploadxmlhttprequest
57
Harts

メソッドに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
       }
    });
}
166
Rob W