我正在使用uplodifive插件上传多个文件,这些文件正常工作,但我坚持使用进度条。我必须显示多个文件的总上传百分比
对于单个文件,可以在onProgress
event的帮助下轻松确定:
var percent = Math.round((e.loaded / e.total) * 100);
但我想计算多个文件的总百分比,我还在演示文件中检查了uplodifive逐个为多个文件工作,
是否可以将所有文件一起上传,以便获得所有文件的总百分比?
看一下屏幕截图,默认uploadifive逐个加载文件,我想一起上传文件。
$('#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 ) );
}
}
答案 0 :(得分:1)
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.');
}
});
});