使用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上传文件

回答

相关问题