使用jQuery Uploadify借助Dorado平台实现批量上传文件动态显示实时上传文件状态

今晚为了完善一个系统比较重要的一个数据导入功能模块,加上晚上有大量的时间,充分施展自己的技能,实现了还算自己满意的一个【使用jQuery Uploadify借助Dorado平台实现批量上传文件动态显示实时上传文件状态】的功能。

1、批量上传布局




2、单个文件上传布局



3、可以选择多个文件,可以设置选择的文件类型



4、动态显示共多少个文件



5、动态显示成功上传的个数,大大提高用户体验



6、成功上传后显示的数据。



6、点击“上传按钮调用的函数” :

/**
 * 批量上传
 */
function batchUpload(){
$('#uploadify').uploadify('upload','*');
showLoadingTip();
window.setInterval(function(){showTime();},1000);
}
7、显示共花费的时长:

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

8、核心JS代码


$(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插件,才能使用批量上传功能!');
                } 
			});
      });




发布了46 篇原创文章 · 获赞 27 · 访问量 16万+

猜你喜欢

转载自blog.csdn.net/shichen2010/article/details/16953229