[英]Using FormData to upload a file
我希望有人可以幫助我。 在過去的幾天里,我一直在靠牆砸我的頭。 我試圖得到它,以便我可以在ajax提交之前以編程方式將文件字段添加到表單。 最終我要做的是支持在我們的框架內拖放多個文件。 我有一個已經設置的基本表單,將用於每個文件,因為它們各自單獨上傳(在拖放它們之后)。 我要做的是遍歷已拖放的文件,將它們添加到表單的(副本),然后將該(復制的)表單發回服務器。 我一直在閱讀的一切都告訴我這是可能的。 但無論我做什么,我都無法讓它發揮作用。 這是我的代碼:
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,Christoph
有時候我是個笨蛋。 我錯過了森林里的樹木。 這條線
oFormData.append(sFieldName, oUploadedFile.files, sFileName);
本來應該
oFormData.append(sFieldName, oUploadedFile.files[0], sFileName);
實現這一改變使其按預期工作。
Uggh。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.