bootstrap 文件上传进度条

div:

    <div class="modal fade" id="processModal" data-keyboard="false"  data-backdrop="static" tabindex="-1" role="dialog"  aria-labelledby="processModalLabel" aria-hidden="true" style="font-family: 微软雅黑;">
  <div class="modal-dialog">
   <div class="modal-content">
    <div class="modal-header">
     <h4 class="modal-title modalTitleText" id="processModalLabel">文件上传进度</h4>
    </div>
    <div class="modal-body">
                         <div class="progress">
                                <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
                        </div>         
    </div>
   </div>
  </div>
 </div>

 js:

function run(){
  $.ajax
        ({ //请求登录处理页
            url: ContextPath + '/File/process.action',
            //传送请求数据
            dateType : "text",
            type:"POST",
            success: function (date) { //登录成功后返回的数据
                //根据返回值进行状态显示  
              if(date<100){
               $("div[class=progress-bar]").css("width",date+"%").text(date+"%");           
                     setTimeout("run()",500);
                 }else{
                  $("div[class=progress-bar]").css("width",date+"%").text(date+"%");
                 }                      
           
            }
        })
   }

 

java: springMvc
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.FileUpload;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.springframework.web.multipart.MultipartException;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;

 

 public class CustomMultipartResolver extends CommonsMultipartResolver {

  private HttpServletRequest request;
  @Override
  protected  FileUpload newFileUpload(FileItemFactory fileItemFactory)
  {
  ServletFileUpload upload = new ServletFileUpload(fileItemFactory);
  upload.setSizeMax(-1);
  if(request!=null)
  {
  ///System.out.println("注入监听");
  FileUploadListener uploadProgressListener = new FileUploadListener();
  upload.setProgressListener(uploadProgressListener);
  HttpSession session = request.getSession();
  session.setAttribute("uploadProgressListener", uploadProgressListener);
  }
  return upload;
  }
  @Override
  public MultipartHttpServletRequest resolveMultipart(HttpServletRequest request) throws MultipartException {
         this.request=request;//获取到request,要用到session
         return super.resolveMultipart(request);
   }
  }

 

import org.apache.commons.fileupload.ProgressListener;

public class FileUploadListener implements ProgressListener {
 
 private long num100Ks = 0;
 private long theBytesRead = 0;
 private long theContentLength = -1;
 private int whichItem = 0;
 private int percentDone = 0;
 private boolean contentLengthKnown = false;

 public void update(long bytesRead, long contentLength, int items) {

 if (contentLength > -1) {
 contentLengthKnown = true;
 }
 theBytesRead = bytesRead;
 theContentLength = contentLength;
 whichItem = items;

 long nowNum100Ks = bytesRead / 100000;
 if (nowNum100Ks > num100Ks) {
 num100Ks = nowNum100Ks;
 if (contentLengthKnown) {
 percentDone = (int) Math.round(100.00 * bytesRead / contentLength);
 }

 }
 }

 public int getPercentDone() {
 return percentDone;
 }
}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值