Chrome 问题 - AJAX 插入的文件输入未上传文件答案

【问题标题】：Chrome Issue - AJAX Inserted File Input not uploading fileChrome 问题 - AJAX 插入的文件输入未上传文件
【发布时间】：2012-03-02 22:34:58
【问题描述】：

我有一个通过 AJAX 动态插入文件输入字段的表单。基本上我所做的是显示一个表单，用户选择他们想要的模板，然后我根据他们选择的模板拉入一些额外的表单字段。其中一个有文件输入。问题是当我提交带有添加文件输入的表单时，PHP $_FILES 数组给我一个错误代码 4，这意味着没有上传文件。有谁知道我需要做什么才能上传这些文件？

我猜我必须在 JS 方面做一些事情来重新评估我要发送的表单字段，但我找不到任何东西。（是的，我在表单上使用了正确的 enctype。）

更新：这只发生在 Safari/Chrome 上。我在其他地方读到，他们认为这是 webkit 浏览器的安全功能。不知道有没有解决办法。。

谢谢大家

【问题讨论】：

更新：这只发生在 Chrome 中。在 IE/Firefox 中，我可以看到 URL 已正确发布。

标签： php javascript jquery ajax

【解决方案1】：

不清楚您使用的是 $.post 还是 form.submit()。如果您使用的是 form.submit() ，则可能会出现其他问题。

否则，为了通过 AJAX 将文件发送到服务器，您需要使用 Form Data 对象。

这个 MDN 页面Using FormDataObjects 有很好的例子来说明如何使用它。请注意，如果您使用 jQuery，则需要将 processData 和 contentType 设置为 false。见下文（取自 MDN 页面）。

var fd = new FormData(document.getElementById("fileinfo"));
fd.append("CustomField", "This is some extra data");
$.ajax({
  url: "stash.php",
  type: "POST",
  data: fd,
  processData: false,  // tell jQuery not to process the data
  contentType: false   // tell jQuery not to set contentType
});

【讨论】：

我不会通过 AJAX 发送文件本身。我只是引入输入字段并将它们植入
本身。那么它只是一个常规的 POST 表单提交。
那么您可能想发布一些代码以便人们可以提供帮助。如果您还没有使用它，jsfiddle.net 是发布代码的好地方。

【解决方案2】：

如果您通过 form.submit() 方法发送表单，则发送文件应该没有问题。您是否尝试通过 ajax 发送文件？如果是这样，你不能直接。使用 iframe、flash 或使用 FileReader 读取文件数据并在您的 ajax 请求中发送原始数据。

【讨论】：

我不想通过 AJAJX 自己发送文件。我只是引入输入字段并将它们植入
本身。那么它只是一个常规的 POST 表单提交。