使用 FormData 上传文件答案

【问题标题】：Using FormData to upload a file使用 FormData 上传文件
【发布时间】：2017-08-30 01:43:19
【问题描述】：

我希望有人可以帮助我解决这个问题。最近几天我一直在用头撞墙。我正在尝试获取它，以便我可以在 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 out oUploadedFile 时，我得到了

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

当我 console.log out 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”具有空值。我一定是做错了什么，但在这一点上，我不知道它可能是什么。我快把自己逼疯了。 :(

任何帮助将不胜感激！

谢谢，克里斯托夫

【问题讨论】：

标签： javascript form-data

【解决方案1】：

有时我是个笨蛋。我只见树木不见森林。这一行

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

应该是

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

进行该更改使其按预期工作。

哎呀。

【讨论】：