是否可以使用 Ajax 进行文件上传？

Posted 2023-02-24

【中文标题】是否可以使用 Ajax 进行文件上传？

【英文标题】：Is it possible to use Ajax to do file upload?

【发布时间】：2010-10-07 08:00:30

【问题描述】：

我不想使用 jQuery，但我想使用 Ajax 进行文件上传。这可能吗？

如果是这样，我在哪里可以找到有关它的信息/教程？

【问题讨论】：

这个answer展示了如何在没有jQuery的情况下做到这一点

【参考方案1】：

不，使用 javascript 无法做到这一点。

但是，为了给人一种“AJAX”的感觉，您可以将表单提交到隐藏的 iframe 并将脚本结果输出到它，然后从那里进行处理。谷歌ajax iframe upload 并从那里开始。

如果您使用的是 jQuery，还有 Form plugin 如果您的表单中有任何文件字段，它将自动为您创建这个 iframe。我没有用它来做这件事，但我听说了一些好事。

正如 cmets 中所指出的，您还可以使用非常流行的 SWFUpload 之类的东西来通过 Flash 实现所需的效果。

【讨论】：

你也可以使用silverlight。

说得非常好，我会在报告中引用它:)

虽然我也认为 iframe 方法是最好的方法，但我想指出，对于支持 FileReader API 的浏览器，还有另一种可能性。我在这里写了一些代码：***.com/questions/2338711/… 至少在 mozilla 上使用 XMLHttpRequest 甚至可以获得上传进度！

我只有 1 个问题，如果 jquery 在 iframe 中提交表单我想知道他是如何在没有进度条出现的情况下做到这一点的，任何 iframe 提交都会在父页面中显示进度条？？？？我需要知道如何在 iframe 中提交表单而不显示进度条

【参考方案2】：

没有亲自使用过，但Ajax Uploader 是我最近遇到的一个组件，它说它可以在 UpdatePanel 中进行文件上传（假设您使用的是 ASP.NET）。

【参考方案3】：

这里有一些关于 gmail 如何使用 iframe 的细节：

http://www.sajithmr.com/upload-files-like-gmail/

【参考方案4】：

我使用swfupload 进行多个类似 ajax 的上传（基于其 javascript/flash）

【讨论】：

我失望了，我只是有点坚持重新发明***并自己做，至少是第一次。我知道这很愚蠢，但我只是需要这样做的人的类型；）

不傻！实际上它很棒。唯一的学习方法。有趣的部分是学习。 ;)

【参考方案5】：

严格来说，real AJAX file uploads 是可行的，但这仅适用于 Firefox 3+、Safari 4 和 Chrome 2。在所有其他浏览器中，您必须使用 iframe 技术或基于 Flash 的上传器之类的解决方法。

【参考方案6】：

假设您使用的是 Java，DWR 3.0 版（目前在 RC1 中）支持二进制文件上传/下载，这使得问题变得非常简单。我还没有机会尝试这个，但我们广泛使用 DWR 并取得了完全的成功；这是一个很棒的 Ajax 工具包。

http://directwebremoting.org/blog/joe/2008/12/16/dwr_version_3_0_release_candidate_1.html

【参考方案7】：

以防有人在很久以后才发现这个问题：是的，现在 JavaScript 可以做到这一点。

HTML5 定义了 2 个新的 API，您可以一起使用它们来完成此操作：拖放 API 和文件 API。您可以使用 jQuery 与 API 进行有效交互，让人们可以拖放文件进行上传。

这里是a tutorial，告诉你怎么做。

该代码目前适用于 Chrome 6+ 和 Firefox 3.6+、Safari 6 和 IE 10。如果您需要 Safari 5 支持，代码几乎完全相同，但您使用 FormData 对象代替上传的文件列表（更多帖子中的信息）。

Opera 从 11 开始支持 File API，但不支持 DnD API，drop 操作不会启动上传，但它们支持您使用 API 访问文件。我想他们将在 12 年内完成对 DnD API 的支持。

01-20-14 更新：所有主流浏览器现在都实现了所有标准 API，因此本教程适用于所有浏览器。

【讨论】：

感谢未来。 (2020)