161005富国天惠分红:jsp+Extjs实现动态显示文件上传进度 .

需求来源是这样的：上传一个很大的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"%>  

1. <%  
2. //注意上面的import的jar包是必须的   
3. //下面是使用apache commons fileupload接收上传文件；   
4. FileItemFactory factory = new DiskFileItemFactory();  
5. ServletFileUpload upload = new ServletFileUpload(factory);  
6. //因为内部类无法引用request，所以要实现一个。   
7. class MyProgressListener implements ProgressListener{  
8.     private HttpServletRequest request = null;  
9.     MyProgressListener(HttpServletRequest request){  
10.         this.request = request;  
11.     }  
12.     public void update(long pBytesRead, long pContentLength, int pItems) {  
13.         double percentage = ((double)pBytesRead/(double)pContentLength);  
14.         //上传的进度保存到session，以便processController.jsp使用   
15.         request.getSession().setAttribute("uploadPercentage", percentage);  
16.     }  
17. }  
18. upload.setProgressListener(new MyProgressListener(request));  
19. List items = upload.parseRequest(request);  
20. Iterator iter = items.iterator();  
21. while (iter.hasNext()) {  
22.     FileItem item = (FileItem) iter.next();  
23.     if (item.isFormField()){  
24.           
25.     } else {  
26.         //String fieldName = item.getFieldName();   
27.         String fileName = item.getName();  
28.         //String contentType = item.getContentType();   
29.        System.out.println();  
30.         boolean isInMemory = item.isInMemory();  
31.         long sizeInBytes = item.getSize();  
32.         File uploadedFile = new File("c://" + System.currentTimeMillis() + fileName.substring(fileName.lastIndexOf(".")));  
33.         item.write(uploadedFile);  
34.     }  
35. }  
36. out.write("{success:true,msg:'保存上传文件数据并分析Excel成功!'}");  
37. out.flush();  
38. %>  

processController.jsp：

<%@ page language="java" import="java.util.*" contentType = "text/html;charset=UTF-8" pageEncoding="utf-8"%>  

1. <%  
2.     //注意上面的抬头是必须的。否则会有ajax乱码问题。   
3.     //从session取出uploadPercentage并送回浏览器   
4.     Object percent = request.getSession().getAttribute("uploadPercentage");  
5.     String msg = "";  
6.     double d = 0;  
7.     if(percent==null){  
8.         d = 0;  
9.     }  
10.     else{  
11.         d = (Double)percent;  
12.         //System.out.println("+++++++processController: " + d);   
13.     }  
14.     if(d<1){  
15.     //d<1代表正在上传，   
16.         msg = "正在上传文件...";  
17.         out.write("{success:true, msg: '"+msg+"', percentage:'" + d + "', finished: false}");  
18.     }  
19.     else if(d>=1){  
20.         //d>1 代表上传已经结束，开始处理分析excel，   
21.         //本例只是模拟处理excel，在session中放置一个processExcelPercentage，代表分析excel的进度。   
22.         msg = "正在分析处理Excel...";  
23.         String finished = "false";  
24.         double processExcelPercentage = 0.0;  
25.         Object o = request.getSession().getAttribute("processExcelPercentage");  
26.         if(o==null){  
27.             processExcelPercentage = 0.0;  
28.             request.getSession().setAttribute("processExcelPercentage", 0.0);  
29.               
30.         }  
31.         else{  
32.             //模拟处理excel,百分比每次递增0.1    
33.             processExcelPercentage = (Double)o + 0.1;  
34.             request.getSession().setAttribute("processExcelPercentage", processExcelPercentage);  
35.             if(processExcelPercentage>=1){  
36.                 //当processExcelPercentage>1代表excel分析完毕。   
37.                 request.getSession().removeAttribute("uploadPercentage");  
38.                 request.getSession().removeAttribute("processExcelPercentage");  
39.                 //客户端判断是否结束的标志   
40.                 finished = "true";  
41.             }  
42.         }  
43.         out.write("{success:true, msg: '"+msg+"', percentage:'" + processExcelPercentage + "', finished: "+ finished +"}");  
44.         //注意返回的数据，success代表状态   
45.         //percentage是百分比   
46.         //finished代表整个过程是否结束。   
47.     }  
48.     out.flush();  
49. %>  

表单页面upload.html：

1.       
2.           
3.           
4.         
5.             href="ext/resources/css/ext-all.css" />  
6.            
7.            
8.           
9.       
10.       
11.         sunxing007  
12.