jquery-file-upload 文件上传带进度条效果

<div style="line-height:34px;margin-top:20px;"> 
    <label style="float: left;font-size:14px">上传文件：</label> 
    <span class="btn btn-success fileinput-button fn-left"> 
   <i class="glyphicon glyphicon-plus"></i> 
   <span>浏览...</span> 
   <input type="file" name="file" id="file_upload"> 
  </span> 
    <div style="float: left;margin-left: 20px;font-weight: bold" id="uploadText"></div> 
    </div> 
    <div class="fn-clear"></div> 
    <div id="progress"> 
    <div class="bar" style="width: 0%;"></div> 
    </div> 

<link rel="stylesheet" href="/admin/assets/plugins/jquery-file-upload/css/jquery.fileupload-ui.css" rel="external nofollow" > 
<link rel="stylesheet" href="/admin/assets/plugins/jquery-file-upload/css/jquery.fileupload.css" rel="external nofollow" > 

/*文件上传控件*/ 
.bar { 
 background-image: -webkit-linear-gradient(top,#5cb85c 0,#449d44 100%); 
 background-image: -o-linear-gradient(top,#5cb85c 0,#449d44 100%); 
 background-image: -webkit-gradient(linear,left top,left bottom,from(#5cb85c),to(#449d44)); 
 background-image: linear-gradient(to bottom,#5cb85c 0,#449d44 100%); 
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0); 
 background-repeat: repeat-x; 
 height: 20px; 
 font-size: 12px; 
 line-height: 20px; 
 color: #fff; 
 text-align: center; 
 background-color: #428bca; 
 -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); 
 box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); 
 -webkit-transition: width .6s ease; 
 -o-transition: width .6s ease; 
 transition: width .6s ease; 
} 
#progress { 
 background-image: -webkit-linear-gradient(top,#ebebeb 0,#f5f5f5 100%); 
 background-image: -o-linear-gradient(top,#ebebeb 0,#f5f5f5 100%); 
 background-image: -webkit-gradient(linear,left top,left bottom,from(#ebebeb),to(#f5f5f5)); 
 background-image: linear-gradient(to bottom,#ebebeb 0,#f5f5f5 100%); 
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff5f5f5', GradientType=0); 
 background-repeat: repeat-x; 
 height: 20px; 
 width: 0%; 
 margin-bottom: 20px; 
 overflow: hidden; 
 background-color: #f5f5f5; 
 border-radius: 4px; 
 -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1); 
 box-shadow: inset 0 1px 2px rgba(0,0,0,.1); 
 margin-top: 20px; 
} 
.glyphicon { 
 position: relative; 
 top: 1px; 
 display: inline-block; 
 font-family: 'Glyphicons Halflings'; 
 font-style: normal; 
 font-weight: 400; 
 line-height: 1; 
 -webkit-font-smoothing: antialiased; 
 -moz-osx-font-smoothing: grayscale; 
} 
.glyphicon-plus:before { 
 content: "\2b"; 
} 
.btn-success { 
 color: #fff; 
 background-color: #5cb85c; 
 border-color: #4cae4c; 
} 
.btn { 
 display: inline-block; 
 padding: 6px 12px; 
 margin-bottom: 0; 
 font-size: 14px; 
 font-weight: 400; 
 line-height: 1.42857143; 
 text-align: center; 
 white-space: nowrap; 
 vertical-align: middle; 
 cursor: pointer; 
 -webkit-user-select: none; 
 -moz-user-select: none; 
 -ms-user-select: none; 
 user-select: none; 
 background-image: none; 
 border: 1px solid transparent; 
 border-radius: 4px; 
}