创建自定义上传进度条
我已经看过所有上传进度条插件，小部件等等 – 它们都很糟糕。 它们要么太笨重而且没有太多无用的代码，要么它们不起作用。
我想知道的是我可以在哪里阅读如何显示简单的上传进度指示器。 大多数浏览器下面都有一个状态进度条，但在与客户交易时使用它并不是很专业。
浏览器如何做到这一点？ 我想知道浏览器如何工作的内部用于指示上传内容的状态，这样我可以使用PHP和jquery制作一些内容。
谢谢。
由于你想使用PHP，我将从uploadprogress扩展开始（默认情况下，PHP不会为你提供有关上传完成之前的任何数据;此扩展提供了这样的服务器端function）。 请注意，它需要PHP 5.2+，并且可能对配置选项很挑剔。 另请参阅其评论和演示以及故障排除提示 ）。 PHP文档注释中提供的简短概述。
使用扩展程序，您可以获得有关上传的统计信息; 然后你可以通过AJAX轮询服务器并更新某种进度条。
更具体一点：
- 获取表单的唯一标识符，并将其包含在隐藏字段中
- 上传应该在IFRAME中运行 – 某些浏览器不允许DOM更新到运行上载的同一页面
- 通过AJAX轮询服务器（使用标识符指定您感兴趣的上传内容）并解析结果（IIRC，您将获得类似“bytes_uploaded => 123，content-length => 1000”的内容）
- 更新你的进度条（显示它的方式取决于你，我使用“x％done”加上一个图形栏）
- 表格上传时重定向整页确定
（哦，顺便说一句，检查PHP的upload_max_filesize和post_max_size设置，因为两者都限制了最大上传大小）
没有可靠的方法来使用JavaScript获取文件上载的进度。 许多浏览器都缺少对XMLHttpRequest upload.onprogress事件的支持，即使使用HTML5，您也不可避免地需要转向Flash或其他文件上传方法。
在提出这个问题之后 ，我最终决定使用plupload来满足我的上传需求。
Javascript/Ecmascript不会Javascript/Ecmascript本机浏览器function（它主要使用C/C++以及访问TCP/UDP套接字的OS APIs 。
要使用JS显示进度条，您需要serverfeedback。 这可以通过使用像COMET这样的服务器polling来完成。 但在这一点上，它就像浏览器构建进度条那样准确。 它可能会改变HTML5 WebSockets 。
要获得准确的结果，您需要持续连接。 您可以fake并限制客户端 – 服务器请求延迟，但它仍然存在。 我不知道Flash究竟是如何处理这个问题的，但我想它也没有面向连接的流（如果我错了，请纠正我）。
我知道这不是你想要的，但我最近一直在使用plupload上传，看起来相当不错，再也不依赖flash或html5
例：
- url是进程页面（php文件）
- container =上传按钮所在的父div或表单（设置它非常重要 – 有一些例子说明如何将事物附加到plupload所执行的某些操作。例如，下面你可以看到我已经附加了
uploader.start();到uploader.start();钩子。 - 您还应该能够通过附加到上传进度挂钩来了解我是如何制作自定义上传进度条的
值得在plupload网站上的论坛上提问，如果你遇到困难，他们很擅长回答它们！
$(function(){ //plupload var uploader = new plupload.Uploader({ runtimes : 'gears,html5,flash', browse_button : 'pickfiles', container : 'form_2', max_file_size : '10mb', url : 'plupload/upload.php', //resize : {width : 320, height : 240, quality : 90}, flash_swf_url : 'plupload/js/plupload.flash.swf', filters : [ {title : "Image files", extensions : "jpg,gif,png"} ] }); uploader.init(); uploader.bind('FilesAdded', function(up, files) { uploader.start(); }); uploader.bind('UploadProgress', function(up, file) { if(file.percent < 100 && file.percent >= 1){ $('#progress_bar div').css('width', file.percent+'%'); } else{ $('#progress_bar').fadeOut(600); } });