您的位置：首页 > Web前端 > JQuery

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

2013-11-25 22:50 1081 查看

今晚为了完善一个系统比较重要的一个数据导入功能模块，加上晚上有大量的时间，充分施展自己的技能，实现了还算自己满意的一个【使用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插件，才能使用批量上传功能！');
}
});
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航