我希望有人可以帮助我。在过去的几天里,我一直在靠墙砸我的头。我试图得到它,以便我可以在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, 克里斯托弗
答案 0 :(得分:0)
有时候我是这样的笨蛋。我错过了森林里的树木。这一行
oFormData.append(sFieldName, oUploadedFile.files, sFileName);
应该是
oFormData.append(sFieldName, oUploadedFile.files[0], sFileName);
进行更改使其按预期工作。
Uggh。