您的位置:首页 > 编程语言 > Java开发

java struts2 多文件上传 加进度条

2014-06-19 00:00 417 查看
摘要: 实现多文件上传,加进度条

接上一篇

6、监听进度js

//开启进度监听
function showProgress(){
$("#sub").attr("disabled","disabled");
finished=false;
callBack();
}

//日志方法
function logText(msg){
$("#tipsText").append(new Date().getTime()+":"+msg+"<br/>");
}

//回调函数,获取上传进度信息
function callBack(){
$.post("${bp}imgfile/uploadgetUploadStatus.html",{},function(data){
if(data!=null){
logText("1111111111111111111111111111111111111");
if(data.percent==100 && fileIndex==(imgSum-1)){
logText("2222222222222222222222222222222222222222222");
//最后一张上传完毕,将finished设为true
finished=true;
}else{
finished=false;
}
var width=data.percent+"%";
nowUploadFileSize=data.uploadFileSize;
var speed=((nowUploadFileSize-nextUploadFileSize)/1024/10)*1000;
nextUploadFileSize=data.uploadFileSize;
if(speed>1024){
$("#speed").text("速度:"+(speed/1024).toFixed(1)+"M/秒");
}else{
$("#speed").text("速度:"+speed.toFixed(2)+"K/秒");
}
$("#img_upload_tip_"+data.fileIndex).text(width);
$("#img_progress_"+data.fileIndex).css({width:(data.percent)+"px"});
//非最后一张上传完毕,将下一张图片序号赋值给fileIndex
if(fileIndex!=data.fileIndex && fileIndex!=(imgSum-1)){
logText("333333333333333333333333333333333333333333上传成功!");
$("#img_upload_tip_"+(data.fileIndex-1)).text("上传成功!");
$("#img_progress_"+(data.fileIndex-1)).css({width:"100px"});
}
fileIndex=data.fileIndex;
}
if(finished && fileIndex==(imgSum-1)){
logText("555555555555555555555555555555555555555555555上传成功!");
//最后一张上传完毕,方法终结
$("#img_upload_tip_"+data.fileIndex).text("上传成功!");
$("#img_progress_"+(data.fileIndex-1)).css({width:"100px"});
return;
}else{
logText("66666666666666666666666666666666666666666666");
//迭代隔10毫秒执行回调函数,获取上传进度信息
setTimeout('callBack()',10);
}
},"json");
}


7、成功运行,截图

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: