Ajax Upload 實現(xiàn)了文件上傳進度條的功能。
首先簡要說明一下AjaxUpload的原理：我們知道上傳文件的時候實際上是客戶端和服務器端創(chuàng)建了一個文件流，我們的目標就是實時得到這個文件到底上傳了多少。我們只要在服務器端創(chuàng)建一個監(jiān)聽器監(jiān)聽這個文件流，很容易就能得到上傳的大小，關鍵問題是怎么把當前一上傳的大小返回給客戶端顯示出來。有了AJAX，這個還是問題么？用DWR遠程調用服務端的FileUploadMontor取一下就OK了。
SpringSide在BookStore示例的圖書管理中演示了該技術。
1.SpringSide Core 的Ajax Upload部分java文件，由網(wǎng)上源碼摘抄并修改而來。
2. BookStore 中的的webapp/widgets/ajaxupload目錄的js與css 文件
3. DWR配置文件，負責與上傳狀態(tài)類的通信。
網(wǎng)上的源碼已經(jīng)做好了實現(xiàn)。我們要做的就是在struts上傳的組件中加一個監(jiān)聽器。Struts是使用commons-upload來上傳的，整合起來比較方便。只需要自己實現(xiàn)一個MultipartRequestHandler，加入監(jiān)聽器的功能，替換掉默認的版本就可以了。
修改Struts使用的MultipartRequestHandler的方法是在配置文件里加入controller：
<controller><set-property property="processorClass" value="org.springframework.web.struts.DelegatingRequestProcessor"/><set-property property="multipartClass"value="org.springside.core.components.ajaxupload.AjaxMultipartRequestHandler"/></controller>
大功告成！！
主要配置DWR 輸出UploadMonitor的內容，見bookstore中的WEB-INF/dwr.xml 和web.xml 中引入dwr的部分，參考DWR中的描述。
action跟正常的文件上傳是一樣的，就是從frombean里得到文件，然后IO處理就是了，這里就不重復了。
頁面需要加上css和ajaxupload.js腳本, dwr的js腳本，還有特定的div來顯示進度條的效果。
如果直接使用我們的封裝的css和js，請在jsp頁面直接引用
<%@ include file="/widgets/ajaxupload/ajaxupload.jsp" %>
1.其中css文件指定了進度條的大小和顏色：
#progressBar {padding-top: 5px;}#progressBarBox {width: 350px;height: 20px;border: 1px inset;background: #eee;}#progressBarBoxContent {width: 0;height: 20px;border-right: 1px solid #444;background: #9ACB34;text-align: right;}2.js文件的內容：
var fileInput;var submitButton;var progressBarBoxContent;var progressBar;function refreshProgress() {UploadMonitor.getUploadInfo(updateProgress);}function updateProgress(uploadInfo) {if (uploadInfo.inProgress) {progressBar.style.display = ‘block‘;fileInput.style.display = ‘none‘;fileInput.disabled = true;submitButton.disabled = true;var fileIndex = uploadInfo.fileIndex;var progressPercent = Math.ceil((uploadInfo.bytesRead / uploadInfo.totalSize) * 100);progressBarBoxContent.innerHTML = progressPercent + ‘%‘;progressBarBoxContent.style.width = parseInt(progressPercent * 3.5) + ‘px‘;window.setTimeout(‘refreshProgress()‘, 100);} else {submitButton.disabled = false;fileInput.disabled = false;progressBar.style.display = ‘none‘;}return true;}function startProgress(fileInputName, submitButtonName) {fileInput = document.getElementById(fileInputName);submitButton = document.getElementById(submitButtonName);progressBar = document.getElementById(‘progressBar‘);progressBarBoxContent = document.getElementById(‘progressBarBoxContent‘);if (fileInput \!= null && submitButton \!= null && progressBar \!= null && progressBarBoxContent \!= null) {progressBarBoxContent.innerHTML = ‘0%‘;window.setTimeout("refreshProgress()", 150);return true;} else {alert(‘Ajax Upload ERROR\!‘);return false;}}
3. 加入進度條的div，見bookstore示例中的bookform.jsp
4. form的onsubmit事件
在form的onsubmit事件里，要加上startProgress才能顯示上傳進度條。
onsubmit="return validateBookForm(this) && startProgress(‘imageFile‘,‘save‘)"