Question

我已经看过所有上传进度条插件，小部件等等 - 它们都很糟糕。它们要么太笨重，代码太多无用，要么无效。

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

浏览器是如何做到的？我想知道浏览器如何工作的内部结构，用于指示上传内容的状态，这样我可以使用PHP＆amp; jquery的。

感谢。

Answer 1

由于您要使用PHP，我将从uploadprogress extension开始（默认情况下，PHP不会为您提供有关上传完成之前的任何数据;此扩展提供此类服务器端功能）。请注意，它需要PHP 5.2 + ，并且可能对配置选项很挑剔。另请参阅其commentary and demo和troubleshooting hints）。 PHP文档中提供的简短概述comments。

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

更具体一点：

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

（哦，顺便说一句，检查PHP的upload_max_filesize和post_max_size设置，因为两者都限制了最大上传大小）

Answer 2

没有可靠方法来获取使用JavaScript上传文件的进度。许多浏览器都缺少对XMLHttpRequest upload.onprogress事件的支持，即使使用HTML5，您也不可避免地需要转向Flash或其他文件上传方法。

在询问this question后，我最终决定使用plupload来满足上传需求。

Answer 3

Javascript/Ecmascript无法解决原生浏览器功能（使用C/C++主要与访问OS APIs套接字的TCP/UDP一起使用。

要显示JS的进度条，您需要服务器反馈。例如，可以使用polling之类的服务器HTML5 WebSockets来完成。但是在这一点上，它就像浏览器构建进度条那样准确。它可能会改为fake。

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

Answer 4

我知道这不是你想要的，但我最近一直在使用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 : '<?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);
    }                               
});

创建自定义上传进度条

4 个答案: