js简单上传进度条

效果如下：

很简单，只要引入css和js即可：注：JQuery是1.8以上的

<script type="text/javascript" src="/courseware-tool/resources/js/bootstrap.min.js"></script>

<link type="text/css" rel="stylesheet" href="/courseware-tool/resources/css/bootstrap.min.css">

 

在本jsp最下面加入div代码：

<div class="modal fade" id="progress" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="progress progress-striped active">
         <div class="progress-bar" style="width: 100%">
             <span></span>
         </div>
        </div>
  </div>
</div>

 

JQuery代码如下：

$(function(){
            $("#uploadForm").find("input[type='submit']").click(function(){
                $("#progress").modal({  backdrop:'static',    keyboard:false,    show:true});
            });
        });

 

上述三点放在同一上传jsp即可。

 

隐藏命令是：$('#progress').modal('toggle');

其中css代码和JQuery代码在此处

 

还有一种样式

 

代码如下：

<div class="modal fade" id="progress">
         <div class="modal-dialog" style="margin-top:50%">
             <div class="modal-content" style="height:120px;">
                <div  style="height:20px;" style="margin-top:50%">      
                    <h3 style="font-size:1.2vw;text-align:center;">上传中...</h3>  
                </div>  
                <div style="height:100px;">
                    <div class="progress progress-striped active" >
                          <div class="progress-bar progress-bar-success" role="progressbar"
                              aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                              style="width: 100%;">
                          </div>
                    </div>
                </div>  
            </div>
        </div>
    </div>