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

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