FormData 不能附加文件对象答案

【问题标题】：FormData cannot appended with File ObjectFormData 不能附加文件对象
【发布时间】：2014-03-10 16:46:16
【问题描述】：

您好，我正在尝试使用 AJAX 上传图像，但是当我尝试将 FormData 附加到我的文件对象时它在这里不起作用是我的代码

var data = new FormData();
$.each(files, function(key, value){
    console.log(value);
    data.append(key, value);
    console.log(data);
});

在控制台中我得到了这个响应

File { size=1626773, type="text/comma-separated-values",    name="Prepaid_Rates_01.03.2014.csv", more...}
uploadrates.js (line 17)
FormData { append=append()}

在这里你可以看到文件显示在控制台中，但追加后在数据中不可用

我也看到了这类问题，但没有找到任何合适的答案

【问题讨论】：

标签： php jquery ajax

【解决方案1】：

我不确定这是否可行。传统上，使用 ajax 上传文件的方法是将表单提交到隐藏的 iframe，然后给出如下响应：

<script type="text/javascript">window.parent.myCallback('Response Received!');</script>

因此，您将创建一个多部分表单，将target 属性设置为您的 iframe 名称，并将所有字段（包括文件字段）作为此表单中的表单字段，后面是 iframe，例如

<form method="post" action="/my-upload-url" target="hidden-iframe">
  Form fields here...
</form>

<iframe name="hidden-iframe"></iframe>

然后当 iframe 在处理完您的表单后加载时，它会立即执行您作为响应输出的 javascript，这将在您的主页中调用函数 myCallback，因此您也应该创建该函数：

<script type="text/javascript">
  function myCallback(message) {
    alert(message);
  }
</script>

总而言之，您的页面应该是：

<form method="post" action="/my-upload-url" target="hidden-iframe">
  Form fields here...
</form>

<iframe name="hidden-iframe"></iframe>

<script type="text/javascript">
  function myCallback(message) {
    alert(message);
  }
</script>

【讨论】：

我认为没有 iframe 是可能的，因为在网上的不同示例中我看到它有效，但在我的情况下，我认为我犯了一些错误并试图找到它，所以我要求并感谢回复。

【解决方案2】：

使用较旧的 jquery 版本文件并替换为最新版本时出现问题。这是旧的jquery

<script src="jquery-1.4.4.js"></script>

新的jquery文件如下：

<script src="jquery-1.11.0.min.js"></script>

我不知道这两个文件的变化，但是当我尝试最新版本时，它允许我上传文件，现在我证明最新版本更好用并尝试使用最新版本；

【讨论】：