⽂件上传显⽰进度条的原理剖析和代码实现
在很多上传的案例中都要⽤到显⽰上传进度的例⼦，本⼈做了⼀个⽤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);//实例化对象(实现类在下⾯有)
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.apachemons.fileupload.ProgressListener;
public class UploadProcessLister implements ProgressListener{//必须实现这接⼝
layout怎么读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();
jquery下载文件请求processbanner uLister=new processbanner();
//uLister=(Attribute("uplistener");
orm框架用来干嘛的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=(Attribute("uplistener");
uLister.setAllSize(allSize);
uLister.setPercent(percent);
uLister.setBeginT(beginT);
uLister.setUpRate(upRate);
uLister.setUseTime(useTime);
uLister.setUpSize(upSize);
plc基础知识指令uLister.setCurT(curT);
session.setAttribute("uplistener", uLister);//把进度对象封装到session⾥
}
/**/
}
写进度监听servlet或jsp 核⼼代码如下-------------------
response.setCharacterEncoding("utf-8");
PrintWriter out=null;
try {
out = Writer();
processbanner processbanner=new processbanner();
processbanner uLister=(Attribute("uplistener");//获取session中的进度对象        if(uLister==null){
uLister=processbanner;
}
double Percent();
int a=0;
if(b>=0.01){
a=(int)Math.rint(b*100);
}
JSONObject json=new JSONObject();
//json.put("data3", AllSize());
//json.put("data2", UseTime());
json.put("parcent", a+"%");//读取对象中的进度参数封装成json数据格式⽅便前端js接收
json.put("bannervalue", a);
out.String());
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);
copy函数用法}
}
});
当单击⿏标提交上传时  触发事件体 执⾏上⾯的 循环⽅法进⾏轮询访问服务器获取进度 在data.bannervalue==100时移除 Interval OK！
效果图：
进度条界⾯⽤的是jquery的ui csdn下载地址：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。