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"%><br /><%<br />//注意上面的import的jar包是必須的<br />//下面是使用apache commons fileupload接收上傳檔案；<br />FileItemFactory factory = new DiskFileItemFactory();<br />ServletFileUpload upload = new ServletFileUpload(factory);<br />//因為內部類無法引用request，所以要實現一個。<br />class MyProgressListener implements ProgressListener{<br />private HttpServletRequest request = null;<br />MyProgressListener(HttpServletRequest request){<br />this.request = request;<br />}<br />public void update(long pBytesRead, long pContentLength, int pItems) {<br />double percentage = ((double)pBytesRead/(double)pContentLength);<br />//上傳的進度儲存到session，以便processController.jsp使用<br />request.getSession().setAttribute("uploadPercentage", percentage);<br />}<br />}<br />upload.setProgressListener(new MyProgressListener(request));<br />List items = upload.parseRequest(request);<br />Iterator iter = items.iterator();<br />while (iter.hasNext()) {<br /> FileItem item = (FileItem) iter.next();<br /> if (item.isFormField()){</p><p> } else {<br /> //String fieldName = item.getFieldName();<br /> String fileName = item.getName();<br /> //String contentType = item.getContentType();<br /> System.out.println();<br /> boolean isInMemory = item.isInMemory();<br /> long sizeInBytes = item.getSize();<br /> File uploadedFile = new File("c://" + System.currentTimeMillis() + fileName.substring(fileName.lastIndexOf(".")));<br /> item.write(uploadedFile);<br /> }<br />}<br />out.write("{success:true,msg:'儲存上傳檔案資料並分析Excel成功!'}");<br />out.flush();<br />%><br />

processController.jsp：

<%@ page language="java" import="java.util.*" contentType = "text/html;charset=UTF-8" pageEncoding="utf-8"%><br /><%<br />//注意上面的抬頭是必須的。否則會有ajax亂碼問題。<br />//從session取出uploadPercentage並送回瀏覽器<br />Object percent = request.getSession().getAttribute("uploadPercentage");<br />String msg = "";<br />double d = 0;<br />if(percent==null){<br />d = 0;<br />}<br />else{<br />d = (Double)percent;<br />//System.out.println("+++++++processController: " + d);<br />}<br />if(d<1){<br />//d<1代表正在上傳，<br />msg = "正在上傳檔案...";<br />out.write("{success:true, msg: '"+msg+"', percentage:'" + d + "', finished: false}");<br />}<br />else if(d>=1){<br />//d>1 代表上傳已經結束，開始處理分析excel，<br />//本例只是類比處理excel，在session中放置一個processExcelPercentage，代表分析excel的進度。<br />msg = "正在分析處理Excel...";<br />String finished = "false";<br />double processExcelPercentage = 0.0;<br />Object o = request.getSession().getAttribute("processExcelPercentage");<br />if(o==null){<br />processExcelPercentage = 0.0;<br />request.getSession().setAttribute("processExcelPercentage", 0.0);</p><p>}<br />else{<br />//類比處理excel,百分比每次遞增0.1<br />processExcelPercentage = (Double)o + 0.1;<br />request.getSession().setAttribute("processExcelPercentage", processExcelPercentage);<br />if(processExcelPercentage>=1){<br />//當processExcelPercentage>1代表excel分析完畢。<br />request.getSession().removeAttribute("uploadPercentage");<br />request.getSession().removeAttribute("processExcelPercentage");<br />//用戶端判斷是否結束的標誌<br />finished = "true";<br />}<br />}<br />out.write("{success:true, msg: '"+msg+"', percentage:'" + processExcelPercentage + "', finished: "+ finished +"}");<br />//注意返回的資料，success代表狀態<br />//percentage是百分比<br />//finished代表整個過程是否結束。<br />}<br />out.flush();<br />%><br />

表單頁面upload.html：

<html><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /><title>File Upload Field Example</title><br /><link rel="stylesheet" type="text/css"<br />href="ext/resources/css/ext-all.css" /><br /><script type="text/javascript" src="ext/adapter/ext/ext-base.js"> </script><br /><script type="text/javascript" src="ext/ext-all.js"> </script><br /><style><br /></style><br /></head><br /><body><br /><a href="http://blog.csdn.net/sunxing007">sunxing007</a><br /><div id="form"></div><br /></body><br /><script><br />var fm = new Ext.FormPanel({<br />title: '上傳excel檔案',<br />url:'uploadController.jsp?t=' + new Date(),<br />autoScroll:true,<br />applyTo: 'form',<br />height: 120,<br />width: 500,<br />frame:false,<br />fileUpload: true,<br />defaultType:'textfield',<br />labelWidth:200,<br />items:[{<br />xtype:'field',<br />fieldLabel:'請選擇要上傳的Excel檔案 ',<br />allowBlank:false,<br />inputType:'file',<br />name:'file'<br />}],<br />buttons: [{<br />text: '開始上傳',<br />handler: function(){<br />//點擊'開始上傳'之後，將由這個function來處理。<br /> if(fm.form.isValid()){//驗證form， 本例略掉了<br /> //顯示進度條<br />Ext.MessageBox.show({<br /> title: '正在上傳檔案',<br /> //msg: 'Processing...',<br /> width:240,<br /> progress:true,<br /> closable:false,<br /> buttons:{cancel:'Cancel'}<br />});<br />//form提交<br /> fm.getForm().submit();<br /> //設定一個定時器，每500毫秒向processController發送一次ajax請求<br /> var i = 0;<br /> var timer = setInterval(function(){<br /> //請求案例<br /> Ext.Ajax.request({<br /> //下面的url的寫法很關鍵，我為了這個調試了好半天<br /> //以後凡是在ajax的請求的url上面都要帶上日期戳，<br /> //否則極有可能每次出現的資料都是一樣的，<br /> //這和瀏覽器緩衝有關<br />url: 'processController.jsp?t=' + new Date(),<br />method: 'get',<br />//處理ajax的返回資料<br />success: function(response, options){<br />status = response.responseText + " " + i++;<br />var obj = Ext.util.JSON.decode(response.responseText);<br />if(obj.success!=false){<br />if(obj.finished){<br />clearInterval(timer);<br />//status = response.responseText;<br />Ext.MessageBox.updateProgress(1, 'finished', 'finished');<br />Ext.MessageBox.hide();<br />}<br />else{<br />Ext.MessageBox.updateProgress(obj.percentage, obj.msg);<br />}<br />}<br />},<br />failure: function(){<br />clearInterval(timer);<br />Ext.Msg.alert('錯誤', '發生錯誤了。');<br />}<br />});<br /> }, 500);</p><p> }<br /> else{<br /> Ext.Msg.alert("訊息","請先選擇Excel檔案再上傳.");<br /> }<br />}<br />}]<br />});<br /></script><br /></html><br />  

把這三個檔案放到tomcat/webapps/ROOT/, 同時把ext的主要檔案也放到這裡，啟動tomcat即可測試：http://localhost:8080/upload.html
我的資源裡面有完整的樣本檔案：http://download.csdn.net/source/1719593， 下載zip檔案之後解壓到tomcat/webapps/ROOT/即可測試。

最後需要特別提醒，因為用到了apache 的fileUpload組件，因此，需要把common-fileupload.jar放到ROOT/WEB-INF/lib下。