javascript - 使用 uplodi Five 将队列中的所有文件一起上传

Question

我正在使用uplodifive上传多个文件的插件，工作正常，但我坚持使用进度条。我必须显示多个文件的总上传百分比

对于单个文件，借助 onProgress 可以轻松确定 event像这样:

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

但是我想计算多个文件的总百分比，我还在演示文件中检查了uplodi Five对多个文件的工作一一，

是否可以将所有文件一起上传，以便我获得所有文件的总百分比？

看截图，默认上传的是一个一个上传的文件，我想一起上传。

    $('#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

使用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.');
        }
    });
});