Use jQuery Uploadify achieve bulk upload file upload real-time dynamic display state aid Dorado platform

Tonight order to improve a system of the more important functions of a data import module, coupled with a lot of time in the evening, to fully display their skills to achieve their satisfaction with a fairly [using jQuery Uploadify achieve bulk upload dynamic display platform by means of Dorado real-time upload file status key functions.

1, bulk uploads layout




2, single file upload layout



3, can select multiple files, the file type selected may be provided



4, dynamic display of the total number of files



5, dynamic display the number of successfully uploaded, greatly improving the user experience



6, the data show after a successful upload.



6, click on the "upload button function call":

/**
 * 批量上传
 */
function batchUpload(){
$('#uploadify').uploadify('upload','*');
showLoadingTip();
window.setInterval(function(){showTime();},1000);
}
7, shows you how long it takes a total of:

function showTime(){
totalTime+=1;
if(totalTime>60){
$('#time').text('已执行'+parseInt((totalTime/60))+'分'+(totalTime%60)+'秒!');
}else{
$('#time').text('已执行'+(totalTime)+'秒!');
}
}  

8, the core JS code


$(function() {
			 var vC=0,vT=0,vS=0;//声明获取选择的文件数量
	         $("#uploadify").uploadify({
	             'swf'       : '<%=ViewUtil.getRequestPath(request)%>'+'avicit/cpm/module/plugins/uploadify-v3.1/uploadify.swf',
	             'uploader'         : 'cpmYfReportAction!importExcel.action',
	             'queueID'        : 'fileQueue',
	             'fileTypeDesc': '支持格式:xls/xlsx.',
	             'fileTypeExts': '*.xls;*.xlsx;',
	             'auto'           : false,
	             'multi'          : true,
	             'uploadLimit' : 999,
	             'fileObjName' : 'excelFile',
	             'buttonText'     : '选择文件',
				 'onUploadSuccess': function(file,result,response) {
				 	vC-=1;
				 	vT+=1;
				 	$('#uCount strong').text('共'+vS+'个文件,成功上传'+vT+'个');
				 	if(vC==0){
				 		result = $.parseJSON(result);
						if(result.type=='1'){
							alert(result.msg);
							hideLoadingTip();
						}else{
							hideLoadingTip();
							parent.reLoad(result);
							SubWindow.hideParent();
						}
				 	}
				 },
				 'onSelect':function(file){
				 	vC+=1;
				 	vS+=1;
				 	$('#uCount').show();
				 	$('#uCount strong').text('已选择'+vC+'个文件');
				 },
                'onUploadStart': function (file) {  
                	var formData={
                		'year':$('#year').val(),
                		'month':$('#month').val(),
                		'dept':$('#dept').val(),
                		'type':$('#type').val(),
                		'scope':$('#scope').val(),
                		'importType':'batch',
                		'fileName':file.name
                	};
                    $("#uploadify").uploadify("settings", "formData", formData);  
                },
                'onFallback':function(){
                	alert('您的电脑必须安装flash插件,才能使用批量上传功能!');
                } 
			});
      });




Published 46 original articles · won praise 27 · views 160 000 +

Guess you like

Origin blog.csdn.net/shichen2010/article/details/16953229