排队异步HTTP文件上传

Question

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

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

- dpq

---

它必须是一个HTTP连接吗？ - Pekka

是的，这就是我提问的重点。 - dpq

问题：如果您提交一个包含多个文件的表单，它们是同时发送还是一个接一个地发送？ - Darryl Hein

由于我的应用程序的特殊性，将所有要上传的文件添加到同一表单中是不可能的，因为用户选择后第一个文件应立即开始上传。也就是说，不应该有“开始上传”按钮，队列应自动进行。 - dpq

Answer 1

我有可靠的消息称，Uploadify非常好用。此外，它原生支持队列。以下是一个简单的示例，假设您已经创建了一个具有id为“foo”的表单“file”元素和一个具有id为“queue”的元素作为队列。有关更多信息，请参见文档。

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

- Benson

---

Uploadify需要Flash，而我正在寻找一个不需要Flash的解决方案。 - dpq

哦，对了。抱歉，我完全忘记了那个要求。顺便问一下，你为什么想避免使用Flash？Uploadify不需要与Flash进行任何交互，它会为你包装好。 - Benson

由于所涉及的 Web 应用程序的特定性，其一个卖点是完全不需要插件就能进行任何真正的工作。由于在其中上传文件是一个相当重要的任务，因此我宁愿避免依赖 Flash。 - dpq

有趣。我很好奇您的目标受众是什么，如果您希望有相当一部分人没有安装Flash插件。这对iPhone或iPad用户来说是合理的，但我很惊讶听到它们支持文件上传。您能提供更多信息吗？ - Benson

Answer 2

由于规范的限制，我不认为可以在单个HTTP连接上完成此操作。

但是，您可以通过将<input>字段放置在单独的表单中（无论是使用HTML还是JavaScript），并按顺序提交它们来实现几乎相同的行为。

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

其他说明:

• 参见此处有关定位iframe的参考信息。请注意，此功能不受HTML / XHTML Strict支持。
• form.target属性必须等于iframe.name属性。 iframe.id将无效；这会在IE6和FF3.5中引起弹出窗口。
• 可在此处查看“一次性”上传使用目标定位的工作示例。我对此示例进行了一些清理，并使用了它。它可以在IE6以及任何一流的浏览器中运行。

- Jesse Hallam

---

请告诉我它是否适用于您。我考虑过自己尝试这样的东西，但一直没有时间。 - Jesse Hallam

Answer 3

我之前见过一种选项，虽然我没有链接或示例，但可以使用iframe。基本上，文件被提交到iframe中，JavaScript会监视iframe何时重新加载，然后提交下一个文件。这不是很好看，我尝试过，但无法在各种浏览器（包括IE6）上运行。

- Darryl Hein

---

好的，谢谢。我会尝试实现它。你还记得你遇到问题的浏览器是哪些吗？ - dpq

我认为最难的是IE6，还有其他IE版本，但我认为7和8还好。已经过了一段时间，我已经删除了所有测试代码，因为我觉得可以使用Flash，因为它已经在网站的其他地方使用了。 - Darryl Hein

Answer 4

这个 jQuery 插件声称可以在不使用 swf 的情况下实现上传功能 http://valums.com/ajax-upload/

- Luca Rocchi

Answer 5

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

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

Erick

- Erick T

Answer 6

总体来看，需要做的事情：

• 编写一个函数，动态添加表单（到HTML），输入类型为文件。每个表单只有一个文件输入字段。这些表单将成为我们的文件上传队列。
• 编写一个提交函数，异步逐个提交这些表单。

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

- vsr

Answer 7

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

- 37Stars

Answer 8

有一种简单高效的方式可以使用XMLHttpRequest异步上传文件：请参考https://developer.mozilla.org/en/using_xmlhttprequest中的“在Firefox 3.5及更高版本中”部分。使用此方法，您可以异步上传文件，并获取上传进度百分比。在Firefox 3.6及更高版本中，您还可以异步上传多个文件。我正在编写一个JS函数以更简单的方式完成此操作，完成后我会发布它。

- albanx