HTML5: 带有进度条的AJAX文件上传

Question

我想制作一个带有进度条的HTML5文件上传器。我已经尝试过许多其他地方找到的教程，包括SO上的这个答案（被接受的答案）似乎最接近我想要的，但我无法弄清楚PHP端，而且$_FILES和$_POST数组都为空。

在人们开始说它不可能用隐藏的iframe等...之前，应该可以使用HTML5。

如果需要，可以使用jQuery，但我的印象是，jQuery目前不支持很多HTML5功能。

更新：

我现在只关心Chrome。

- Endophage

---

你尝试过这个吗？http://aquantum-demo.appspot.com/file-upload - Vladimir

@Vladimir 谢谢，那个方法可以用，但它不是HTML5，而是一个非常复杂的隐藏iframe实现。 - Endophage

我不确定您所说的"它不是HTML5"是什么意思。这个并没有使用iframe（至少对于大多数现代浏览器来说）。 - Vladimir

@Vladimir 我再看一下。我在功能中看到它说它使用AJAX和回退。我之前错过了这一点，只看到他们捆绑了jQuery iframe传输插件... - Endophage

@Vladimir，您是否愿意将您的建议作为官方答案？我还没有完全实现它的时间，但我已经下载了代码和示例，并进行了一些调整，表明它对我很有效。 - Endophage

Answer 1

我认为这个可能适合你 http://aquantum-demo.appspot.com/file-upload

- Vladimir

---

谢谢。我花了一些时间来以我需要的定制格式运行它，但我不必修改核心，只需微调配置选项，直到我获得所需的行为即可。现在运行非常好。 - Endophage

Answer 2

我认为处理文件上传的最佳项目来自TinyMCE的制造商Moxiecode，使用Plupload。它可以与HTML5一起使用，但也可以回退到Browser Plus、Gears、Flash或Silverlight。它是GPLv2许可。

您可以在这里查看他们的一些示例：http://www.plupload.com/example_queuewidget.php

- Treffynnon

---

似乎不支持从操作系统拖放文件到浏览器中，这是一个重要的HTML5组件... - Endophage

他们说可以，但是他们的演示不能正确处理它。 - Endophage

Chrome本身是否具备执行该操作的能力？HTML5拖放在Firefox中运行良好，但是Chrome会尝试打开文件，但它无法打开，因此将其添加到下载队列中。请参见http://www.plupload.com/example_all_runtimes.php（向下滚动到HTML5），我将一个JPG文件拖放到其中。 - Treffynnon

Chrome确实具备相应的功能，但是那个框架在Chrome中处理不正确。我也曾经遇到过和你一样的问题。然而，在Q的评论中，Vladimir推荐的jQuery插件在Chrome中可以正常工作。 - Endophage

也许这个问题与此票有关：https://github.com/moxiecode/plupload/issues/311。演示没有定义 drop_element，因此如果您定义了它，那么您就会拥有一个可以工作的Chrome + HTML5文件上传工具。 - Treffynnon