java struts2 多文件上传 加进度条
博客专区 > smallyer 的博客 > 博客详情
java struts2 多文件上传 加进度条
smallyer 发表于3年前
java struts2 多文件上传 加进度条
  • 发表于 3年前
  • 阅读 199
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

摘要: 实现多文件上传,加进度条

接上一篇

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

共有 人打赏支持
粉丝 0
博文 2
码字总数 1365
×
smallyer
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: