Commons Fileupload+Servlet+JQuery实现文件上传进度条

实现文件动态上传，大致的思路是这样的：

首先，利用Common Fileupload的ProgressListener接口讲实时的文件上传百分比存入session中，

然后，实现一个读取session的servlet，在web端利用ajax间隔一定时间请求这个servlet，

最后，将文件上传百分比显示在web端，并制作进度条。

1.实现ProgressListener

ServletFileUpload upload = new ServletFileUpload(upload_factory);
		class UploadProgressListener implements ProgressListener{
			private HttpServletRequest request;
			private DecimalFormat df = new DecimalFormat("#00.0");
			UploadProgressListener(HttpServletRequest request){
				this.request = request;
			}
			@Override
			public void update(long bytesRead, long bytesTotal, int items) {
				double percent= (double)bytesRead*100/(double)bytesTotal;
				System.out.println(df.format(percent));
				request.getSession().setAttribute("UPLOAD_PERCENTAGE", df.format(percent));
			}
		}
		upload.setProgressListener(new UploadProgressListener(request));

2.实现读取session的servlet

HttpSession session = request.getSession();
		Object is_begin = session.getAttribute("IS_UPLOAD_BEGIN");
		if(is_begin==null) return;
		if("0".equals(is_begin.toString())) return;
		PrintWriter out = response.getWriter();
		Object upload_percentage = session.getAttribute("UPLOAD_PERCENTAGE");
		out.write("{percentage:'"+upload_percentage.toString()+"'}");
		out.flush();

3.web端间隔时间的ajax请求

function beginUpload(){
		$("#progress_bar").show();
		setInterval("getUploadMeter()",1000);
	}
	function getUploadMeter(){
		$.post("UploadMeter",function(data){
			var json = eval("("+data+")");
			jQuery("#progress").css("width",json.percentage/100*200+"px");
			jQuery("#msg").css("padding","5px").html(json.percentage+"%");
		});
	}

评论

1 楼 zzl5720480 2016-02-18  

你好，我也在写这个东西，能否发一份源码呢，我研究研究