文件上传显示进度条的原理剖析和代码实现

 在很多上传的案例中都要用到显示上传进度的例子，本人做了一个用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