使用FormData上傳文件

我希望有人能幫助我。過去幾天我一直在撞牆。我試圖獲得它，以便我可以在ajax提交之前以編程方式將文件字段添加到表單。最終，我試圖做的是支持在我們的框架內拖放多個文件。我有一個基礎表單，它已經被設置並且將被用於每個文件，因爲它們分別是上傳的（在它們被拖放之後）。我想要做的是迭代已拖放的文件，將它們添加到表單的副本中，然後將該表單複製到服務器。我一直在閱讀的一切都告訴我，這是可能的。但無論我做什麼，我都無法讓它工作。這裏是我的代碼：使用FormData上傳文件

var oFormData = new FormData($form[0]), //$form is a jQuery object 
    oUploadedFile = this.oUploadedFile, //regular HTML input field; yes, in an object 
    sFieldName = oUploadedFile.name, //file_input_1 
    sFileName = oUploadedFile.value.split('\\').pop(); 

oFormData.append(sFieldName, oUploadedFile.files, sFileName); 

$.ajax({ 
    data: oFormData, 
    type: 'post', 
    url: '/my/uploadHandler.html', 
    encoding: 'multipart/form-data', 
    dataType: 'json', 
    /*cache: false,*/ 
    contentType: false, 
    processData: false, 
    uploadProgress: function uploadProgress(oEvent) { 
    }, 
    success: function success(oData, sStatus, oXHR) { 
    }, 
    error: function error(oEvent) { 
    } 
});

這是形式是什麼樣子（$ form.html（））：

<input type="hidden" name="TargetPage" value="/my/uploadHandler.html"> 
<input type="hidden" name="targetFormId" value="ResourceForm"> 
<input type="hidden" name="contextLabel" value="Upload"> 
<input type="hidden" name="ResourceId" value="0"> 
<input type="hidden" name="resourceFormId" value="47"> 
<input type="hidden" name="teamId" value="35"> 
<input type="hidden" name="TeamId" value="35"> 
<input type="hidden" id="fileRestrictions" name="fileRestrictions" value="">

當我CONSOLE.LOG出oUploadedFile，我給

<input type="file" name="file_input_1">

當我CONSOLE.LOG出oUploadedFile.files，我給

> FileList {0: File, length: 1} 
length:1 
0: File 
    lastModified: 1421935281000 
    lastModifiedDate: Thu Jan 22 2015 09:01:21 GMT-0500 (EST) 
    name: "10 Essential Chrome Tips to Skyrocket Your Productivity.pdf" 
    size: 3426463 
    type: "application/pdf" 
    webkitRelativePath: "" 
    __proto__: File 
__proto__: FileList

所以，對我來說，它看起來像一切都是猶太教。我正確地實例化FormData對象，我正確地將文件字段添加到FormData（根據https://developer.mozilla.org/en-US/docs/Web/API/FormData/append），並且所有內容都已提交到後端。

問題是，當我在接收PHP腳本中註銷$ _REQUEST和$ _FILES時，$ _FILES爲空，我看到字段輸入「file_input_1」與其他$ _REQUEST數據（全部這是正確的，並具有上述形式定義的字段/值對），「file_input_1」具有空值。我一定在做錯事，但在這一點上，我不知道它可能是什麼。我正在讓自己瘋狂。 :(

任何幫助將非常感激！

日Thnx，克里斯托夫

來源

2017-04-04 Christoph

有時我這樣的笨蛋。我失蹤了樹木，不見森林。這條線

oFormData.append(sFieldName, oUploadedFile.files, sFileName);

應該已經

oFormData.append(sFieldName, oUploadedFile.files[0], sFileName);

使該茶nge按預期工作。

Uggh。

來源

2017-04-04 18:40:23 Christoph

使用FormData上傳文件

回答

相關問題