upload all files together from queue with uplodifive

Question

i am using the uplodifive plugin to upload multiple files, that working correctly, but i stuck with the progress bar. What i have to display the total uploaded percent of multiple files

For a single file its easy to determine with the help of onProgress event like this:

var percent = Math.round((e.loaded / e.total) * 100);

but i want to calculate the total percent for multiple file, i also checked in the demo file the uplodifive works one by one for the multiple file,

is it possible to upload all files together so that i get the total percent of all the files?

take a look on the screenshoot, default uploadifive load the files one by one, i want to upload file together.

    $('#fileElem').uploadifive({
                'auto'              : false, 
                'height'            : 20, 
                'width'             : 75, 
                'truncateLength'    : 27, 
                'queueID'           : 'fl-que', 
                'simUploadLimit'    : 0, 
                'onSelect'          : function(){ selectHandle(); }, 
                'onCancel'          : function(){ if($('#fl-que > div').length == 1){ cancelHandle(); } }, 
                'buttonText'        : '<span class="plus_icon">+</span> <span class="txt">Add Files</span>', 
                'uploadScript'      : '/wp_themes/itrnsfr/uploadifive.php', 
                'onProgress'        : function(file, e){ progressHandle(file, e); }, 
                'onUploadComplete'  : function(){ uploadCompleteHandle(); }
        });


    function progressHandle(file, e){
            //console.log(file);
            //console.log(e);
            if(e.lengthComputable){
                box.eq(0).hide();   // Hide main uploader
                box.eq(1).show();   // Display progress bar
                box.eq(2).hide();   // Hide the complete MSG

                var percentComplete = Math.round((e.loaded / e.total) * 100);

                $('#loader_val').text( percentComplete + '%');
                var jmeter = ("0." + (percentComplete <= 9 ? "0" + percentComplete : (percentComplete == 100) ? "99" : percentComplete) );
                PG.change({size: parseFloat(jmeter)});
                $('.trnsfr-ratio').text( unitConversion( e.position ) );
            }


        }

Answer 1

Use OnUploadProgress:

HTML:

<input type="file" name="file_upload" id="file_upload" />
<div id="progress"></div>

JS:

$(function() {
    $("#file_upload").uploadify({
        'swf'              : '/uploadify/uploadify.swf',
        'uploader'         : '/uploadify/uploadify.php',
        'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {
            $('#progress').html(totalBytesUploaded + ' bytes uploaded of ' + totalBytesTotal + ' bytes.');
        }
    });
});