文件上传进度条提示框

1、html提示框

<!-- 文件上传提示框 -->
<div class="modal fade" tabindex="-1" role="dialog" id="waitingModal" >
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="background: gray;">
                <div class="modal-header">
                    <h4 class="modal-title" style="color: white;">正在上传中...</h4>
                </div>
                <div class="meter red">
					<span style="width: 100%"></span>
				</div>
                <!-- <div class="modal-body">
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 100%;height: 17px;">
                            <span class="sr-only">100%</span>
                        </div>
                        
                    </div>
                </div> -->
                <div class="modal-footer">
                    <button type="button" disabled class="btn btn-default" data-dismiss="modal">正在上传中，请勿关闭或刷新页面！</button>
                </div>
            </div>
        </div>
    </div>

2、提示框样式

<!-- 文件上传进度条 -->
<style>
.meter { 
	height: 20px;  /* Can be anything */
	position: relative;
	margin: 60px 0 20px 0; /* Just for demo spacing */
	background: #555;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	border-radius: 25px;
	padding: 10px;
	-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
	-moz-box-shadow   : inset 0 -1px 1px rgba(255,255,255,0.3);
	box-shadow        : inset 0 -1px 1px rgba(255,255,255,0.3);
}
.meter > span {
	display: block;
	height: 100%;
	   -webkit-border-top-right-radius: 8px;
	-webkit-border-bottom-right-radius: 8px;
	       -moz-border-radius-topright: 8px;
	    -moz-border-radius-bottomright: 8px;
	           border-top-right-radius: 8px;
	        border-bottom-right-radius: 8px;
	    -webkit-border-top-left-radius: 20px;
	 -webkit-border-bottom-left-radius: 20px;
	        -moz-border-radius-topleft: 20px;
	     -moz-border-radius-bottomleft: 20px;
	            border-top-left-radius: 20px;
	         border-bottom-left-radius: 20px;
	background-color: rgb(43,194,83);
	background-image: -webkit-gradient(
	  linear,
	  left bottom,
	  left top,
	  color-stop(0, rgb(43,194,83)),
	  color-stop(1, rgb(84,240,84))
	 );
	background-image: -moz-linear-gradient(
	  center bottom,
	  rgb(43,194,83) 37%,
	  rgb(84,240,84) 69%
	 );
	-webkit-box-shadow: 
	  inset 0 2px 9px  rgba(255,255,255,0.3),
	  inset 0 -2px 6px rgba(0,0,0,0.4);
	-moz-box-shadow: 
	  inset 0 2px 9px  rgba(255,255,255,0.3),
	  inset 0 -2px 6px rgba(0,0,0,0.4);
	box-shadow: 
	  inset 0 2px 9px  rgba(255,255,255,0.3),
	  inset 0 -2px 6px rgba(0,0,0,0.4);
	position: relative;
	overflow: hidden;
}
.meter > span:after, .animate > span > span {
	content: "";
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background-image: 
	   -webkit-gradient(linear, 0 0, 100% 100%, 
	      color-stop(.25, rgba(255, 255, 255, .2)), 
	      color-stop(.25, transparent), color-stop(.5, transparent), 
	      color-stop(.5, rgba(255, 255, 255, .2)), 
	      color-stop(.75, rgba(255, 255, 255, .2)), 
	      color-stop(.75, transparent), to(transparent)
	   );
	background-image: 
		-moz-linear-gradient(
		  -45deg, 
	      rgba(255, 255, 255, .2) 25%, 
	      transparent 25%, 
	      transparent 50%, 
	      rgba(255, 255, 255, .2) 50%, 
	      rgba(255, 255, 255, .2) 75%, 
	      transparent 75%, 
	      transparent
	   );
	z-index: 1;
	-webkit-background-size: 50px 50px;
	-moz-background-size: 50px 50px;
	-webkit-animation: move 2s linear infinite;
	   -webkit-border-top-right-radius: 8px;
	-webkit-border-bottom-right-radius: 8px;
	       -moz-border-radius-topright: 8px;
	    -moz-border-radius-bottomright: 8px;
	           border-top-right-radius: 8px;
	        border-bottom-right-radius: 8px;
	    -webkit-border-top-left-radius: 20px;
	 -webkit-border-bottom-left-radius: 20px;
	        -moz-border-radius-topleft: 20px;
	     -moz-border-radius-bottomleft: 20px;
	            border-top-left-radius: 20px;
	         border-bottom-left-radius: 20px;
	overflow: hidden;
}
.animate > span:after {
	display: none;
}
@-webkit-keyframes move {
    0% {
       background-position: 0 0;
    }
    100% {
       background-position: 50px 50px;
    }
}
.orange > span {
	background-color: #f1a165;
	background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f1a165),color-stop(1, #f36d0a));
	background-image: -webkit-linear-gradient(#f1a165, #f36d0a); 
}
.red > span {
	background-color: #999;
	background-image: -moz-linear-gradient(top, #999, #32c787);
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #999),color-stop(1, #32c787));
	background-image: -webkit-linear-gradient(#999, #32c787);
}
.nostripes > span > span, .nostripes > span:after {
	-webkit-animation: none;
	background-image: none;
}
.meter{box-sizing: initial;}
</style>

3、js

//上传进度条JS
function showWaiting() {
　　$('#waitingModal').modal({
　　　　keyboard: false,
　　　　backdrop: 'static',
　　　　show: true
　　});
}
function hideWaiting() {
　　$('#waitingModal').modal('hide');
}

4、在ajax中的使用

$.ajax({
      url: ctx + 'section/update', 
      type: 'POST', 
      data: uploadFile ,
      contentType: false, //不设置内容类型  
      processData:false,
      beforeSend:function(){
          showWaiting();//提交时调用提示框
      },
      complete:function(){       
      	  hideWaiting();//执行完隐藏提示框
      },
      success: function(r) {
      	 
      }, 
      error: function(r) {
      	    	
      } 
}); 

5、效果展示：