爲什麼FileEntry的FormData.append文件不能正確上傳？

我使用FormData與AJAX（對於進度條，但我省略了簡單的代碼）上傳文件：爲什麼FileEntry的FormData.append文件不能正確上傳？

<form method="post" enctype="multipart/form-data"> 
    <input type="file" name="file" /> 
</form>

$(document).ready(function() { 
    $(document).on("change", ":file", function() { 
    var i; 
    for (i = 0; i < this.files.length; i++) { 
     var file = this.files[i]; 
     uploadFile(this.name, file); 
    } 
    } 
} 

function uploadFile(inputName, file) { 
    var formData = new FormData(); 
    formData.append(inputName, file); 
    $.ajax({ 
    type: "POST", 
    url: "/api/newfile", 
    data: formData, 
    timeout: 0, 
    cache: false, 
    contentType: false, 
    processData: false 
    }) // some code omitted... 
}

這工作得很好。接下來，我有一個Apache科爾多瓦手機應用程序相同的代碼，但我添加了一個「拍照」按鈕，它採用navigator.camera.getPicture和FileEntry.file獲取文件對象，並調用相同uploadFile函數中的每個文件輸入下面的選項：

$(document).ready(function() { 
    $("input:file").each(function(index) { 
    $("<button class='take_picture_button ui-btn'>Take Picture</button>").insertAfter($(this)); 
    }); 

    $(document).on("click", ".take_picture_button", function(e) { 
    $inputFileElement = $(this).prev("input:file").first(); 
    navigator.camera.getPicture(function(fileURI) { 
     window.resolveLocalFileSystemURL(fileURI, function(fileEntry) { 
     fileEntry.file(function(file) { 
      uploadFile($inputFileElement.attr("name"), file); 
     }); 
     }); 
    }); 
    }); 
}); // some code omitted...

這不起作用 - 服務器只是獲取「[object Object]」而不是文件。

連接Chrome開發者工具的Android應用程序，我看到了失敗的情況下，請求負載的這一部分：

------WebKitFormBoundaryThmH13yROUHXJ4jB 
Content-Disposition: form-data; name="identity_file[file]" 

[object Object]

在工作情況：

------WebKitFormBoundaryztHB86BlcKBZ9dPX 
Content-Disposition: form-data; name="identity_file[file]"; filename="0DuheTR.jpg" 
Content-Type: image/jpeg

我想在工作它並不實際顯示文件有效載荷，但我可以確認它的工作原理。

看起來，在失敗的情況下，它沒有正確地看到File對象，因爲它不會自動添加文件名屬性，也不會自動添加Content-Type，而且似乎只是做一個天真的toString身體。該應用程序使用Cordova 6.2.0構建，並在Android 6.0.1上運行。

我在兩種情況下都在File對象上運行了console.dir，它們看起來差不多，儘管失敗案例中的proto是Object而不是File - 爲什麼？

工作：

File 
    lastModified: 1458490019474 
    lastModifiedDate: Sun Mar 20 2016 09:06:59 GMT-0700 (PDT) 
    name: "0DuheTR.jpg" 
    size: 152054 
    type: "image/jpeg" 
    webkitRelativePath: "" 
    __proto__: File

不合格：

File 
    end: 785009 
    lastModified: 1469992497000 
    lastModifiedDate: 1469992497000 
    localURL: "cdvfile://localhost/cache-external/1469992495873.jpg" 
    name: "1469992495873.jpg" 
    size: 785009 
    start: 0 
    type: "image/jpeg" 
    __proto__: Object

來源

2016-07-31 Kevin

也許FileEntry.file沒有用正確的格式的工作？您也可以嘗試將結果添加到Blob中，並以此方式創建File對象。新的Blob（[data]，{type：「image/png」}）; – Bram

@Bram嗨布拉姆，我不知道你的意思，因爲文件從Blob繼承。 – Kevin

使用科爾多瓦文件傳輸plugin.There你需要給文件的URL來upload.You可以在這裏找到參考link

來源

2016-08-01 10:56:32 Homen

這工作。這有點煩人，因爲我沒有jQuery.ajax的所有便利（例如，不得不調用'jQuery.parseJSON（result.response）'）。 – Kevin

ok Cheers @kelvin – Homen

，我認爲它是內容類型不設置爲文件的multipart/form-data的，通過一個虛擬形式的加密類型是多/表單數據，然後添加你想要添加到它的領域，即

<form method="post" enctype="multipart/form-data"></form>

var form=new FormData($("form"));

我認爲應該至少有幫助。

來源

2016-07-31 20:26:31

正確的觀點，但是爲了簡化我的代碼片段，我將其從代碼片段中刪除了，但它存在於代碼中。我現在很確定（寫一個問題有助於澄清！）問題是FileEntry.file返回一個不能從File繼承的「File」對象。我認爲這是嵌入式WebView中的一個錯誤。我目前正在調查如何從它得到一個適當的文件對象... – Kevin

owk酷，仍然會調查它，如果你最終得到請你不要評論或分享 –

的問題已經回答了here。您需要使用FileReader將文件對象進一步轉換爲Blob。

我只是引用它的要點在這裏：

var formData = new FormData(); 
window.resolveLocalFileSystemURL(fileURI, function(fileEntry) { 
    fileEntry.file(function(file) { 
     var reader = new FileReader(); 
     reader.onloadend = function(e) { 
      var imgBlob = new Blob([this.result], {type:"image/jpeg"}); 
      formData.append('image', imgBlob); 
      //post formData here 
     }; 
     reader.readAsArrayBuffer(file); 
    }); 
});

來源

2017-11-23 10:08:41

爲什麼FileEntry的FormData.append文件不能正確上傳？

回答

相關問題