采用commons-fileUpload ，ajax实现文件上传进度条

首先 说明 本次只是简单的实现了 文件上传的进度和进度条显示 不支持 断点续传和取消

 

最近想动手 实现以下文件上传能够显示进度条 ，网上查了一下有的采用的是假的进度或者就是第三方插件。

无意中有重新看了一下apache commons-fileupload的官网 在用户指南最下边我们会发现有这个：

这不就是文件上传的进度监听嘛 ，apache都为我们做好了 为什么还要用什么第三方插件呢/

 现在 就大概说一下实现思路吧：

• 自定义一个进度监听类实现ProgressListener接口 重写update方法 具体实现可以直接参考官网上面的
• 通过以读取的字节数跟文件总的字节数生成读取百分比 将该数字放在session中
• 创建一个servlet用来获取session中的百分比
• 在上传文件界面 在表单提交的时候 用ajax每隔100毫秒 访问 上文创建的servlet响应的百分比值 显示在界面

具体实现代码如下：

上传界面index.jsp的js：

<script type="text/javascript">
    	
    function callback(){
    	$.ajax({
			type:"post",
			url:"FileUploadStatus",//响应文件上传进度的servlet
			success:function(msg){
			document.getElementById("span").innerHTML="已上传："+msg;//显示读取百分比
			document.getElementById("table").width=msg;//通过表格宽度 实现进度条
			}
		})
    }
    function formSubmit(){
    	window.setInterval("callback()", 100);//每隔100毫秒执行callback
    	document.form.submit();		
    }	

index.jsp 表单：

<form action="FileUploadServlet" method="post" enctype="multipart/form-data" target="_parent" name="form">
    	<input type="file" name="file" ><input type="button" οnclick="formSubmit()" value="提交">
    </form>
    
    <span id="span"></span>
    <table width="300px;" border="0"><tr><td>
    <table id="table" height="20px;" style="background-color: gray;"><tr><td></td></tr></table>//用来实现进度条显示
    </td>
    </tr>
   </table>

自定义进度监听类myProgressListener实现ProgressListener

public class myProgressListener implements ProgressListener {
	private double megaBytes = -1;
	private HttpSession session;
	public myProgressListener(HttpServletRequest request) {
		session=request.getSession();
	}
	public void update(long pBytesRead, long pContentLength, int pItems) {
		double mBytes = pBytesRead / 1000000;
		double total=pContentLength/1000000;
	       if (megaBytes == mBytes) {
	           return;
	       }
	       System.out.println("total====>"+total);
	       System.out.println("mBytes====>"+mBytes);
	       megaBytes = mBytes;
	       System.out.println("megaBytes====>"+megaBytes);
	       System.out.println("We are currently reading item " + pItems);
	       if (pContentLength == -1) {
	           System.out.println("So far, " + pBytesRead + " bytes have been read.");
	       } else {
	           System.out.println("So far, " + pBytesRead + " of " + pContentLength
	                              + " bytes have been read.");
	          double read=(mBytes/total);
	          NumberFormat nf=NumberFormat.getPercentInstance();
	          System.out.println("read===>"+nf.format(read));//生成读取的百分比 并放入session中
	          session.setAttribute("read", nf.format(read));
	       }
	}

}

封装FileUpload 用来接收request中的表单域 和 file文件域

public class FileUpload {
	private Map<String,String> params;
	private Map<String,FileItem> files;
	
	public FileUpload() {
		params=new HashMap<String, String>();
		files=new HashMap<String, FileItem>();
	}
	
	public void setMap(HttpServletRequest request){
		// Create a factory for disk-based file items
		FileItemFactory factory = new DiskFileItemFactory();
		// Create a new file upload handler
		ServletFileUpload upload = new ServletFileUpload(factory);
		upload.setHeaderEncoding("utf-8");
		upload.setProgressListener(new myProgressListener(request));//设置进度监听器
		// Parse the request
		try {
			List items = upload.parseRequest(request);
			Iterator iter = items.iterator();
			while (iter.hasNext()) {
			    FileItem item = (FileItem) iter.next();
			    if (item.isFormField()) {
			    	String name = item.getFieldName();
			        String value = item.getString();
			        params.put(name, value);
			    } 
			    else{
			        String name=item.getFieldName();
			        files.put(name, item);
			    }
			}
		} catch (FileUploadException e) {
			e.printStackTrace();
		}
	}

	public Map<String, String> getParams() {
		return params;
	}

	public Map<String, FileItem> getFiles() {
		return files;
	}
	//用来获取文件的名字
	public String getFileName(FileItem item){
		String fName=item.getName();
		System.out.println("fname=====>"+fName);
		int lastIndex=fName.lastIndexOf("\\");
		fName=fName.substring(lastIndex+1);
		System.out.println("new fname=====>"+fName);
		return fName;
	}
}

实现文件上传的servlet

public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		FileUpload fu=new FileUpload();
		fu.setMap(request);//解析request
		Map<String,FileItem> files=fu.getFiles();
		String fileName =fu.getFileName(files.get("file"));
		File file=new File(this.getServletContext().getRealPath("upload\\"+fileName));
		try {
			
			files.get("file").write(file);
			
		} catch (Exception e) {
			e.printStackTrace();
		}
		out.println("<script>alert('上传成功！');history.back();</script>");
	}

实现用来响应上传进度的servlet FileUploadStatus

public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		HttpSession session=request.getSession();
		
		String status=(String) session.getAttribute("read");//获取上传进度百分比
		System.out.println(status+"FileUploadStatus");
		out.println(status);//响应
	}

效果如下图：

测试 过程中 小文件 可能效果不明显  最好弄个大文件测试一下

 

实现方法、效果可能不是多完美 但好歹 也是亲自实现的 还是挺开心的额.....