jquery处理进度滚动条

项目中要用到导入excel,显示处理进度条,怎么实现呢?

我说下具体做法,欢迎批评指正。

1、第一步

后台插入数据库时,记录总的excel条数和处理了多少条。

统统把他们放在session中。

2、第二步利用jquery的progressbar组件(注意jquery版本,因为版本的不同,使用会有所不同,建议查看对应版本的api)

 代码片段

 <style>
  .ui-progressbar {
    position: relative;
  }
  .progress-label {
    position: absolute;
    left: 50%;
    top: 4px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
  }
  </style>
  
<script type="text/javascript">
    var progressbar = $( "#progressbar" );
    var progressLabel = $( ".progress-label" );
	  progressbar.progressbar({
	  	 value: true,
	  	 change: function() {
	         progressLabel.text( progressbar.progressbar("option","value" ) + "%" );
	     },
	    complete: function() {
	         progressLabel.text( "完成!" );
	     }
    });
	
	function downloadAttResult() {
		document.location.href = "${_currConText }/attendanceResult/operate/downloadAttResult.action";
	}
	
	function process(){
		$.ajax({
			url:"${_currConText}/common/view/ajaxGetDealProcessStatus.action", 
			data:{ranNum:Math.random()},
			type:"post",
			dataType:"json", 
			success:function(data){
				 var val=parseInt(data.bfb);
		    	 progressbar.progressbar('option','value',val+1);
			     if(val>=99){
					  $("#import_button").attr("disabled",false);
				      document.getElementById("importClassIFrame_td").style.display="";
			     }else{
					  setTimeout(process,100);
			     }
			}
		});
	}
  	$("#import_button").click(function(){
 		document.getElementById("importClassIFrame_td").style.display="none";
  		var tag = 1;
		var str = "";
		var filename = document.getElementById("myFile").value;
		if (!filename) {
			str = str + "请选择要导入的文件!";
			tag = 0;
		} else {
			var arys = filename.split('.');
			var suffix = arys[arys.length - 1];
			var temp = "xls";
			if (suffix != temp) {
				str = str + "只能导入后缀.xls文件!";
				tag = 0;
			}
		}
		if (tag == 1) {
			  $("#form2").submit();//form提交耗时
		  	  $("#progressbar").show();
			  $("#import_button").attr("disabled",true);//按钮变灰,解决重复提交
			  setTimeout(process,1000);
		} else if (tag == 0) {
			alert(str);
			return false;
		}
  });
  	
  	
  	
  </script>




<div id="progressbar" style="display:none"><div class="progress-label"></div></div>



<td id="importClassIFrame_td"  bgcolor="#FFFFFF" width="100%" height="100px;" style="display:none">
<iframe name="importClassIFrame" id="importClassIFrame"   width="100%" height="100%" frameborder="0" scrolling="no"></iframe> 
</td>

3、其中前台定时ajax请求获得处理条数,从而出现滚动条效果。



问题:因为用到session,存在多线程问题,同时打开多个窗口上传excel,就会相互影响。怎么处理,请给点意见。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值