排队异步 HTTP 文件上传答案

【问题标题】：Queuing asynchronous HTTP file uploads排队异步 HTTP 文件上传
【发布时间】：2011-01-25 10:28:31
【问题描述】：

有没有一种方法可以在不借助 Flash 或 Silverlight 的情况下，仅使用巧妙使用的表单和 JavaScript 来对文件上传进行排队？请注意，上传应异步执行。

我所说的“排队”上传是指如果用户尝试上传多个文件，它们不应同时传输，而是一次传输一个，在单个 HTTP 连接中。

【问题讨论】：

必须是一个 HTTP 连接吗？
是的。这就是我的问题的重点。
问题：如果你提交一个包含多个文件的表单，它们是同时发送的，还是一个接一个？
由于我的应用程序的特殊性，不可能将所有要上传的文件添加到同一个表单中，因为第一个文件应该在用户选择后立即开始上传。 IE。应该没有“开始上传”按钮，队列应该自动进行。

标签： javascript http file-upload

【解决方案1】：

由于规范的限制，我认为不可能在单个 HTTP 连接上执行此操作。但是，通过将 <input> 字段放在单独的表单中（使用 HTML 或 JavaScript）并按顺序提交，您可能会获得几乎相同的行为。

将他们的目标放在<iframe> 上并使用iframe.onload 事件触发列表中的下一个表单。

补充说明：

请参阅this 以了解针对 iframe 的参考。请注意，HTML/XHTML Strict 不支持此功能。
form.target 属性必须等于iframe.name 属性。 iframe.id 不起作用；它会在 IE6 和 FF3.5 中导致弹出窗口。
here 提供了使用定位的“一次性”上传的工作示例。我已经清理了这个例子并使用了它。它适用于 IE6 以及任何一流的浏览器。

【讨论】：

让我知道它是否适合您。我想过自己尝试这样的事情，但没有时间。

【解决方案2】：

我有充分的权威表明Uploadify 非常好。此外，它原生支持队列。一个简单的示例，假设您已经创建了一个表单“文件”元素，其 id 为“foo”，并且一个元素用作队列，其 id 为“queue”。有关更多信息，请参阅docs。

$("foo").uploadify({
  'uploader'  : 'uploadify.swf',
  'script'    : 'uploadify.php',
  'cancelImg' : 'cancel.png',
  'auto'      : true,
  'folder'    : '/uploads',
  'queue'     : "queue"
});

【讨论】：

Uploadify 需要 Flash，而我正在寻找不需要的解决方案。
哦，对了。对不起，我完全忘记了这个要求。出于好奇，你为什么要避免闪光？ Uploadify 不需要与 flash 进行任何交互，它会为您包装它。
由于所讨论的网络应用程序的特殊性，它的卖点之一是它根本不需要插件来完成任何实际工作。由于上传文件是其中一项相当大的任务，我宁愿避免依赖 Flash。
有趣。我很想知道您的目标受众是什么，如果您希望他们中有合理数量的人没有闪光灯。如果它针对 iphone 或 ipad 是有道理的，但听到它们完全支持文件上传，我会感到惊讶。你能提供更多信息吗？

【解决方案3】：

我以前见过的一个选项是使用 iframe，虽然我没有链接或示例。基本上，文件被提交到 iframe 和 JavaScript 监视，以查看 iframe 何时重新加载，然后提交下一个。它不漂亮，我想我试过了，但无法让它跨浏览器工作（我当时需要，包括 IE6）。

【讨论】：

好的，谢谢。我将尝试实施它。您还记得您遇到过哪些浏览器问题吗？
我相信最难的是IE6，还有其他IE，但我认为7&8还可以。已经有一段时间了，我已经删除了所有的测试代码，因为我可以使用 Flash，因为它已经在网站的其他地方使用过。

【解决方案4】：

大体上看，需要做什么：

动态添加表单（到 html）的函数，输入类型为文件。一种形式将只有一个文件输入字段。这些表单将成为我们的文件上传队列。
一个提交函数，它将一个接一个地异步提交这些表单。

这是我现在能想到的简单逻辑[回家后必须编码]。

【讨论】：

【解决方案5】：

如果您正在寻找 .Net 和更具体的 Asp.Net MVC 解决方案，请查看这篇文章，http://dimebrain.com/2010/01/large-or-asynchronous-file-uploads-in-asp-net-mvc.html。我已将其加入书签以供参考。

【讨论】：

【解决方案6】：

这个 jquery 插件声称它没有使用 swf http://valums.com/ajax-upload/

【讨论】：

【解决方案7】：

有一种使用 xmlhttprequest 异步上传文件的简单有效方法：请参阅“在 Firefox 3.5 及更高版本中”部分中的https://developer.mozilla.org/en/using_xmlhttprequest。有了这个，您可以异步上传文件，也可以获得上传的进度百分比。使用 firefox 3.6 及更高版本，您还可以异步上传多个文件。我正在制作一个更简单的js函数，完成后我会发布它。

【讨论】：

【解决方案8】：

最近，我写了一个 jQuery 插件，可以让你做这样的事情。我不能发布代码，但我可以描述它是如何工作的。如果它没有意义，请告诉我，因为它已经有一段时间了。

有一组上传表单元素。当一个文件被选中时，它会发布到一个隐藏的 iFrame，其内容（通过 base64）被复制到一个隐藏的表单字段中。然后，当最终表单提交时，隐藏表单字段的内容用于获取文件信息。

埃里克

【讨论】：