Ajax Upload--文件上傳進度條

http://wiki.springside.org.cn/display/springside/AjaxUpload

Ajax Upload--文件上傳進度條

1.概述

Ajax Upload 實現了文件上傳進度條的功能。

首先簡要說明一下AjaxUpload的原理：我們知道上傳文件的時候實際上是客戶端和服務器端創建了一個文件流，我們的目標就是實時得到這個文件到底上傳了多少。我們只要在服務器端創建一個監聽器監聽這個文件流，很容易就能得到上傳的大小，關鍵問題是怎麼把當前一上傳的大小返回給客戶端顯示出來。有了AJAX，這個還是問題麼？用DWR 遠程調用服務端的FileUploadMontor取一下就OK了。

SpringSide在BookStore示例的圖書管理中演示了該技術。

2. 使用

2.1 所需文件

1.SpringSide Core 的Ajax Upload部分java文件，由網上源碼摘抄並修改而來。

2.BookStore 中的的webapp/widgets/ajaxupload目錄的js與css 文件

3. DWR配置文件，負責與上傳狀態類的通信。

2.2 與Struts框架的結合

網上的源碼已經做好了實現。我們要做的就是在struts上傳的組件中加一個監聽器。Struts是使用commons-upload來上傳的，整合起來比較方便。只需要自己實現一個MultipartRequestHandler，加入監聽器的功能，替換掉默認的版本就可以了。

修改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的內容，見bookstore中的WEB-INF/dwr.xml 和web.xml 中引入dwr的部分，參考DWR 中的描述。

2.4 Struts Action 無需修改

action跟正常的文件上傳是一樣的，就是從frombean裏得到文件，然後IO處理就是了，這裏就不重複了。

2.5 頁面的修改

頁面需要加上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才能顯示上傳進度條。

 οnsubmit="return validateBookForm(this) && startProgress('imageFile','save')"