Ajax Upload--文件上傳進(jìn)度條1.概述Ajax Upload 實(shí)現(xiàn)了文件上傳進(jìn)度條的功能。 首先簡(jiǎn)要說(shuō)明一下AjaxUpload的原理：我們知道上傳文件的時(shí)候?qū)嶋H上是客戶端和服務(wù)器端創(chuàng)建了一個(gè)文件流，我們的目標(biāo)就是實(shí)時(shí)得到這個(gè)文件到底上傳了多少。我們只要在服務(wù)器端創(chuàng)建一個(gè)監(jiān)聽(tīng)器監(jiān)聽(tīng)這個(gè)文件流，很容易就能得到上傳的大小，關(guān)鍵問(wèn)題是怎么把當(dāng)前一上傳的大小返回給客戶端顯示出來(lái)。有了AJAX，這個(gè)還是問(wèn)題么？用DWR遠(yuǎn)程調(diào)用服務(wù)端的FileUploadMontor取一下就OK了。 SpringSide在BookStore示例的圖書管理中演示了該技術(shù)。 2. 使用2.1 所需文件1.SpringSide Core 的Ajax Upload部分java文件，由網(wǎng)上源碼摘抄并修改而來(lái)。 2. BookStore 中的的webapp/widgets/ajaxupload目錄的js與css 文件 3. DWR配置文件，負(fù)責(zé)與上傳狀態(tài)類的通信。 2.2 與Struts框架的結(jié)合網(wǎng)上的源碼已經(jīng)做好了實(shí)現(xiàn)。我們要做的就是在struts上傳的組件中加一個(gè)監(jiān)聽(tīng)器。Struts是使用commons-upload來(lái)上傳的，整合起來(lái)比較方便。只需要自己實(shí)現(xiàn)一個(gè)MultipartRequestHandler，加入監(jiān)聽(tīng)器的功能，替換掉默認(rè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> 大功告成??！ 2.3 DWR的配置主要配置DWR 輸出UploadMonitor的內(nèi)容，見(jiàn)bookstore中的WEB-INF/dwr.xml 和web.xml 中引入dwr的部分，參考DWR中的描述。 2.4 Struts Action 無(wú)需修改action跟正常的文件上傳是一樣的，就是從frombean里得到文件，然后IO處理就是了，這里就不重復(fù)了。 2.5 頁(yè)面的修改頁(yè)面需要加上css和ajaxupload.js腳本, dwr的js腳本，還有特定的div來(lái)顯示進(jìn)度條的效果。 如果直接使用我們的封裝的css和js，請(qǐng)?jiān)趈sp頁(yè)面直接引用 1.其中css文件指定了進(jìn)度條的大小和顏色： #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文件的內(nèi)容： 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. 加入進(jìn)度條的div，見(jiàn)bookstore示例中的bookform.jsp 4. form的onsubmit事件 在form的onsubmit事件里，要加上startProgress才能顯示上傳進(jìn)度條。 onsubmit="return validateBookForm(this) && startProgress(‘imageFile‘,‘save‘)"
|
|
|
