Creating a custom download progress bar

Question

I saw all the download plugins, widgets, etc. - they all suck. They are too cumbersome with too much useless code, or they do not work.

I want to know where I can read how to display a light download progress indicator. Most browsers have a status indicator on them below, but it’s not very professional to use this when working with clients.

How does the browser do this? I want to know the insides of how the browser works to indicate the loading status of something so that I can do something with PHP and jquery.

Thank.

Answer 1

PHP, uploadprogress (PHP , ​​ ). , PHP 5.2 + . . ), , PHP .

, ; AJAX - .

:

• IFRAME - DOM ,
• AJAX ( , , ) (IIRC, - "bytes_uploaded = > 123, content-length = > 1000" )
• (, , , "x% done" )
• OK

(Oh btw, PHP upload_max_filesize post_max_size, )

Answer 2

, JavaScript. XMLHttpRequest upload.onprogress , HTML5, Flash .

, plupload .

Answer 3

Javascript/Ecmascript ( C/C++ OS APIs, TCP/UDP.

JS, . , polling, COMET. , . , , HTML5 WebSockets.

, . fake gild -, . , Flash , , , ( , ).

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);
    }                               
});