创建自定义上传进度条

Question

我已经看过所有上传进度条插件,小部件等等 - 它们都很糟糕.他们要么太笨重,有太多无用的代码,要么无法工作.

我想知道的是我可以在哪里阅读如何显示简单的上传进度指示器.大多数浏览器下面都有一个状态进度条,但在处理客户端时使用它并不是很专业.

浏览器如何做到这一点？我想知道浏览器如何工作的内部用于指示上传内容的状态,以便我可以使用PHP和jquery创建一些内容.

谢谢.

Answer 1

由于你想使用PHP,我将从uploadprogress扩展开始(默认情况下,PHP不会为你提供有关上传完成之前的任何数据;此扩展提供了这样的服务器端功能).请注意,它需要PHP 5.2+,并且可能对配置选项很挑剔.另请参阅其评论和演示以及故障排除提示).PHP文档注释中提供的简短概述.

使用扩展程序,您可以获得有关上传的统计信息; 然后你可以通过AJAX轮询服务器并更新某种进度条.

更具体一点:

• 获取表单的唯一标识符,并将其包含在隐藏字段中
• 上传应该在IFRAME中运行 - 某些浏览器不允许DOM更新到运行上载的同一页面
• 通过AJAX轮询服务器(使用标识符指定您感兴趣的上传内容)并解析结果(IIRC,您将获得类似"bytes_uploaded => 123,content-length => 1000"的内容)
• 更新你的进度条(显示它的方式取决于你,我使用"x%done"加上一个图形栏)
• 表格上传时重定向整页确定

(哦,顺便说一下,检查PHP的upload_max_filesize和post_max_size设置,因为两者都限制了最大上传大小)

Answer 2

Javascript/Ecmascript不能干扰本机浏览器功能（主要与访问套接字C/C++一起使用。OS APIsTCP/UDP

要显示进度条，JS您需要服务器反馈。例如，这可以通过使用polling像COMET这样的服务器来完成。但在这一点上，它永远不会像浏览器内置进度条那么准确。也许它会改变HTML5 WebSockets。

为了获得准确的结果，您需要持续的连接。您可以fake和gild客户端服务器请求延迟，但它仍然存在。我不知道如何Flash处理这个问题，但我想它也没有面向连接的流（如果我错了，请纠正我）。