需求来源是这样的:上传一个很大的excel文件到server, server会解析这个excel, 然后一条一条的插入到数据库,整个过程要耗费很长时间,因此当用户点击上传之后,需要显示一个进度条,并且能够根据后台的接收的数据量和处理的进度及时更新进度条。
分析:后台需要两个组件,uploadController.jsp用来接收并且处理数据,它会动态的把进度信息放到session,另一个组件processController.jsp用来更新进度条;当用户点“上传”之后,form被提交给uploadController.jsp,同时用js启动一个ajax请求到processController.jsp,ajax用获得的进度百分比更新进度条的显示进度,而且这个过程每秒重复一次;这就是本例的基本工作原理。
现在的问题是server接收数据的时候怎么知道接收的数据占总数据的多少? 如果我们从头自己写一个文件上传组件,那这个问题很好解决,关键是很多时候我们都是用的成熟的组件,比如apache commons fileupload; 比较幸运的是,apache早就想到了这个问题,所以预留了接口可以用来获取接收数据的百分比;因此我就用apache commons fileupload来接收上传文件。
uploadController.jsp:
<%@ page language="java" import="java.util.*, java.io.*, org.apache.commons.fileupload.*, org.apache.commons.fileupload.disk.DiskFileItemFactory, org.apache.commons.fileupload.servlet.ServletFileUpload" pageEncoding="utf-8"%> <% //注意上面的import的jar包是必须的 //下面是使用apache commons fileupload接收上传文件; FileItemFactory factory = new DiskFileItemFactory(); ServletFileUpload upload = new ServletFileUpload(factory); //因为内部类无法引用request,所以要实现一个。 class MyProgressListener implements ProgressListener{ private HttpServletRequest request = null; MyProgressListener(HttpServletRequest request){ this.request = request; } public void update(long pBytesRead, long pContentLength, int pItems) { double percentage = ((double)pBytesRead/(double)pContentLength); //上传的进度保存到session,以便processController.jsp使用 request.getSession().setAttribute("uploadPercentage", percentage); } } upload.setProgressListener(new MyProgressListener(request)); List items = upload.parseRequest(request); Iterator iter = items.iterator(); while (iter.hasNext()) { FileItem item = (FileItem) iter.next(); if (item.isFormField()){ } else { //String fieldName = item.getFieldName(); String fileName = item.getName(); //String contentType = item.getContentType(); System.out.println(); boolean isInMemory = item.isInMemory(); long sizeInBytes = item.getSize(); File uploadedFile = new File("c://" + System.currentTimeMillis() + fileName.substring(fileName.lastIndexOf("."))); item.write(uploadedFile); } } out.write("{success:true,msg:'保存上传文件数据并分析Excel成功!'}"); out.flush(); %>
processController.jsp:
<%@ page language="java" import="java.util.*" contentType = "text/html;charset=UTF-8" pageEncoding="utf-8"%> <% //注意上面的抬头是必须的。否则会有ajax乱码问题。 //从session取出uploadPercentage并送回浏览器 Object percent = request.getSession().getAttribute("uploadPercentage"); String msg = ""; double d = 0; if(percent==null){ d = 0; } else{ d = (Double)percent; //System.out.println("+++++++processController: " + d); } if(d<1){ //d<1代表正在上传, msg = "正在上传文件..."; out.write("{success:true, msg: '"+msg+"', percentage:'" + d + "', finished: false}"); } else if(d>=1){ //d>1 代表上传已经结束,开始处理分析excel, //本例只是模拟处理excel,在session中放置一个processExcelPercentage,代表分析excel的进度。 msg = "正在分析处理Excel..."; String finished = "false"; double processExcelPercentage = 0.0; Object o = request.getSession().getAttribute("processExcelPercentage"); if(o==null){ processExcelPercentage = 0.0; request.getSession().setAttribute("processExcelPercentage", 0.0); } else{ //模拟处理excel,百分比每次递增0.1 processExcelPercentage = (Double)o + 0.1; request.getSession().setAttribute("processExcelPercentage", processExcelPercentage); if(processExcelPercentage>=1){ //当processExcelPercentage>1代表excel分析完毕。 request.getSession().removeAttribute("uploadPercentage"); request.getSession().removeAttribute("processExcelPercentage"); //客户端判断是否结束的标志 finished = "true"; } } out.write("{success:true, msg: '"+msg+"', percentage:'" + processExcelPercentage + "', finished: "+ finished +"}"); //注意返回的数据,success代表状态 //percentage是百分比 //finished代表整个过程是否结束。 } out.flush(); %>
表单页面upload.html:
File Upload Field Example sunxing007 <>
把这三个文件放到tomcat/webapps/ROOT/, 同时把ext的主要文件也放到这里,启动tomcat即可测试:http://localhost:8080/upload.html
我的资源里面有完整的示例文件:点击下载, 下载zip文件之后解压到tomcat/webapps/ROOT/即可测试。
最后需要特别提醒,因为用到了apache 的fileUpload组件,因此,需要把common-fileupload.jar放到ROOT/WEB-INF/lib下。