Php 创建自定义上载进度条

我看过所有上传进度条插件、小部件等——它们都很烂。它们要么体积太大，有太多无用的代码，要么无法工作

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

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

---

谢谢。

Javascript/Ecmascript

不能干扰本机浏览器功能（它主要使用

C/C++

以及访问

TCP/UDP

套接字的

OS-api

）

要使用

JS

显示progressbar，您需要服务器反馈。这可以通过使用服务器

轮询来实现，例如。
但在这一点上，它从来没有像progressbar中的浏览器构建那样精确。它可能会随着
HTML5WebSockets
而改变

要获得准确的结果，您需要一个连续的连接。您可以
false
和
gild
客户端服务器请求延迟，但它仍然存在。我不知道
Flash
如何准确处理此问题，但我想它也没有面向连接的流（如果我在这里出错，请纠正我）.
使用JavaScript获取文件上传进度没有可靠的方法。许多浏览器都不支持该事件，即使使用HTML5，您也不可避免地需要使用Flash或其他文件上传方法

询问之后，我最终决定使用来满足我的上传需求。
既然您想使用PHP，我就从开始（默认情况下，在上传完成之前，PHP不会向您提供任何有关的数据；此扩展提供此类服务器端功能）。请注意，它需要PHP5.2+，并且可能对配置选项很挑剔。另请参见其和）。PHP文档中提供的简短概述

使用扩展，你可以在上传上获得一些统计信息；然后，您可以通过AJAX轮询服务器，并更新某种进度条

具体来说：


获取表单的唯一标识符，并将其包含在隐藏字段中
上载应该在IFRAME中运行-某些浏览器不允许对运行上载的同一页面进行DOM更新
通过AJAX轮询服务器（使用标识符指定您感兴趣的上传）并解析结果（IIRC，您将得到类似“bytes\u upload=>123，content length=>1000”的结果）
更新进度条（显示进度条的方式由您决定，我使用“x%完成”加上图形条）
表单上载时重定向整个页面OK

（哦，顺便说一句，检查PHP的upload_max_filesize和post_max_size设置，因为两者都限制了最大上传大小）
我知道这不是你想要的，但我最近一直在使用它进行上传，而且它看起来相当不错，而且不完全依赖flash或html5

例如：



url是处理页面（php）
文件）
container=上传按钮所在的父div或表单（设置此项非常重要-有一些示例说明如何将内容附加到plupload执行的某些操作。例如，下面可以看到我已将
uploader.start（）；
附加到
uploader.start（）；
挂钩
您还应该能够通过附加到upload progress钩子来查看我是如何创建自定义上载进度条的


值得在plupload网站的论坛上提问如果你被卡住了，他们会很好地回答你的问题

$(function(){
    //plupload
    var uploader = new plupload.Uploader({
        runtimes : 'gears,html5,flash',
        browse_button : 'pickfiles',
        container : 'form_2',
        max_file_size : '10mb',
        url : '<?php echo SITE_ROOT ?>plupload/upload.php',
        //resize : {width : 320, height : 240, quality : 90},
        flash_swf_url : '<?php echo SITE_ROOT ?>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);
    }                               
});                         

$（函数（）{
//多极体
var uploader=新的plupload.uploader({
运行时：“gears，html5，flash”，
浏览按钮：“pickfiles”，
容器：“form_2”，
最大文件大小：“10mb”，
url:'plupload/upload.php'，
//调整大小：{宽度：320，高度：240，质量：90}，
flash_swf_url:'plupload/js/plupload.flash.swf'，
过滤器：[
{标题：“图像文件”，扩展名：“jpg、gif、png”}
]
});
uploader.init（）；
uploader.bind（'FilesAdded'，函数（up，files）{
uploader.start（）；
});
uploader.bind（'UploadProgress'，函数（up，file）{
如果（file.percent<100&&file.percent>=1）{
$（'#进度条div'）.css（'width'，file.percent+'%'）；
}
否则{
$（‘进度条’）。淡出（600）；
}                               
});                         
确实如此，因为浏览器向网页提供的信息量（有意）是有限的。浏览器进度条的工作级别低于页面内的进度条，因此它有更多关于页面状态的数据，因此它吸收的信息更少（TM）。如果你想建立自己的、更好的页面内进度条，那就去吧。而且浏览器栏也很糟糕-只有AFAIK-only Chrome和Opera会向你显示在发送POST请求时上载了多少数据。Flash知道它传输了多少字节/需要传输多少字节，并在连接打开和传输时触发事件。这是
xhr.upload.onprogress
事件（Firefox 3.5中松散支持）应该提供的功能，但我从来没有让它可靠地工作过。事实上，仅使用JS时没有可靠的方法；如果您可以问服务器“我们到了吗？”，事情变得简单了。谢谢我喜欢plupload看起来真的很酷。但是你是如何让它链接到php页面上传的？我似乎不明白。我已经用调用plupload的脚本更新了我的答案。除了plupload在没有flash的msie上无法工作-(