文件上傳顯示進度條的原理剖析和代碼實現

 在很多上傳的案例中都要用到顯示上傳進度的例子，本人做了一個用commons-fileupload jar 工具上傳並顯示進度的例子。前端採用輪詢方式訪問服務器獲取進度

    首先看下 文件上傳的代碼(部分代碼)只講上傳進度要注意的部分

   

	ServletFileUpload upload = new ServletFileUpload(factory);
			// 設置單個文件的最大上傳值
			//upload.setFileSizeMax(10002400l);
			// 設置整個request的最大值
			//upload.setSizeMax(10002400l);
			
			upload.setHeaderEncoding("UTF-8");
			   processbanner processbanner=new processbanner();//進度條參數的封裝對象（下面有實現）
			   ProgressListener upListener=new UploadProcessLister(request);//實例化監聽器對象(實現類在下面有)
			    request.getSession().setAttribute("uplistener", processbanner);//session中傳封裝的進度條參數的對象（用於前臺取值）
			try {
				upload.setProgressListener(upListener);//這裏要注入一個監聽器對象upLisenter

    進度參數的封裝對象

  

package org.ITschool.support.util;

public class processbanner {
	 private double upRate = 0.0;//上傳速度
	 private double percent = 0.01;//上傳進度
	 private long useTime = 0;//當前耗時量
	 private long upSize = 0;//已上傳大小
	 private long allSize = 0;//文件大小
	 private int item;//當前文件索引值/*省略相應的get set 方法*/

   實現監聽器接口：

      

package org.ITschool.support.util;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

import org.apache.commons.fileupload.ProgressListener;

public class UploadProcessLister implements ProgressListener{//必須實現這接口
	 private HttpSession session;
	 private HttpServletRequest request;
	 private double upRate = 0.0;//上傳速度
	 private double percent = 0.0;//上傳進度
	 private long useTime = 0;//當前耗時量
	 private long upSize = 0;//已上傳大小
	 private long allSize = 0;//文件大小
	 private int item;//當前文件索引值
	 
	 private long beginT = System.currentTimeMillis();
	 private long curT = System.currentTimeMillis();
	 public UploadProcessLister(HttpServletRequest request){//構造方法
		  session=request.getSession();
		  processbanner uLister=new processbanner();
	      //uLister=(processbanner)session.getAttribute("uplistener");
	      session.setAttribute("uplistener", uLister);
	 }
	@Override
	public void update(long pBytesRead, long pContentLength, int pItems) {//實現接口方法 第一個參數：已讀入字節數 第二個參數:文件大小(單位byte) 第三個參數:當前文件索引值
		// TODO Auto-generated method stub
		item=pItems;//文件索引值
		allSize=pContentLength;//文件大小
		upSize = pBytesRead;  //byte 已讀入字節 單位 byte
        useTime = curT-beginT;   //ms 用時 單位ms
        if(useTime != 0)
            upRate = pBytesRead/useTime;   // byte/ms
           else
            upRate = 0.0;
        if(pContentLength !=0){
        	percent = (double)pBytesRead/(double)pContentLength; 
        }
        
		 processbanner uLister=new processbanner();
      uLister=(processbanner)session.getAttribute("uplistener");
        
          uLister.setAllSize(allSize);
	      uLister.setPercent(percent);
	      uLister.setBeginT(beginT);
	      uLister.setUpRate(upRate);
	      uLister.setUseTime(useTime);
	      uLister.setUpSize(upSize);
	      uLister.setCurT(curT);
	      session.setAttribute("uplistener", uLister);//把進度對象封裝到session裏
        

	}
	/**/

}

  寫進度監聽servlet或jsp 核心代碼如下-------------------

   

 response.setCharacterEncoding("utf-8");
	  PrintWriter out=null;
	try {
		out = response.getWriter();
		 processbanner processbanner=new processbanner();
		    processbanner uLister=(processbanner)session.getAttribute("uplistener");//獲取session中的進度對象
	        if(uLister==null){
	      	  uLister=processbanner;
	        }
		    double b=uLister.getPercent();
	       int a=0;
	       if(b>=0.01){
	      	 a=(int)Math.rint(b*100);
	       }
		    JSONObject json=new JSONObject();
	      //json.put("data3", uLister.getAllSize());
	      //json.put("data2", uLister.getUseTime());
	      json.put("parcent", a+"%");//讀取對象中的進度參數 封裝成json數據格式 方便前端js接收
	      json.put("bannervalue", a);
		   out.print(json.toString());
		   out.flush();
		  
	} catch (IOException e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	}
	  finally{
		  if(out!=null)out.close();
	  }
	   

   前端輪詢訪問這個servlet

    

    b=setInterval(uploadbanner,300);//這個添加到單擊事件的函數體裏

function uploadbanner(){
  
     jQuery.ajax({
        url:'servlet地址',
        type:"POST", 
        dataType:"json",
         success:function(data){ 
              if(data.bannervalue==100){
                $("#banner").html("上傳成功!");
                $("#success").slideDown("slow");
                $("#img").hide();
                $("#progressbar").hide();
                clearInterval(b); //移除循環器    
                }else{
                     banner(data.bannervalue);
                    $("#banner").html(data.parcent);             
                }
               
         }
    });      
  
}

  當單擊鼠標提交上傳時  觸發事件體 執行上面的 循環方法進行輪詢訪問服務器獲取進度 在data.bannervalue==100時移除 Interval OK！

   效果圖：

  

  進度條界面用的是jquery的ui csdn下載地址：jquery-ui.zip