java struts2 多文件上传 加进度条

接上一篇

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、成功运行,截图

java struts2 多文件上传 加进度条

你可能感兴趣的:(java struts2 多文件上传 加进度条)