1.概述

在實際的Web應該開發或網站開發過程中，經常需要實現文件上傳的功能。在文件上傳過程中，經常需要用戶進行長時間的等待，為了讓用戶及時了解上傳進度，可以在上傳文件的同時，顯示文件的上傳進度條。運行本實例，如圖1所示，訪問文件上傳頁面，單擊“瀏覽”按鈕選擇要上傳的文件，注意文件不能超過50MB，否則系統將給出錯誤提示。選擇完要上傳的文件后，單擊“提交”按鈕，將會上傳文件并顯示上傳進度。

2.技術要點

主要是應用開源的Common-FileUpload組件來實現分段文件上傳，從而實現在上傳過程中，不斷獲取上傳進度。下面對Common-FileUpload組件進行詳細介紹。

Common-FileUpload組件時Apache組織下的jakarta-commons項目下的一個子項目，該組件可以方便地將multipart/form-data類型請求中的各種表單域解析出來。該組件需要另一個名為Common-IO的組件的支持。這兩個組件包文件可以到http://commons.apache.org網站上進行下載。

（1）創建上傳對象

在應該Common-FileUpload組件實現文件上傳時，需要創建一個工廠對象，并根據該工廠對象創建一個新的文件上傳對象，具體代碼如下：

DiskFileItemFactory factory = new DiskFileItemFactory();ServletFileUpload upload = new ServletFileUpload(factory); 

（2）解析上傳請求

創建一個文件上傳對象后，就可以應用該對象來解析上傳請求，獲取全部的表單項，可以通過文件上傳對象的parseRequest()方法來實現。parseRequest()方法的語法結構如下：

public List parseRequest(HttpServletRequest request) throws FileUploadException 

（3）FileItem類

在Common-FileUpload組件中，無論是文件域還是普通表單域，都當成FileItem對象來處理。如果該對象的isFormField()方法返回值為true，則表示是一個普通表單域，否則為一個文件域。在實現文件上傳時，可以通過FileItem類的getName()方法獲得上傳文件的文件名，通過getSize()方法獲得上傳文件的大小。

3.具體實現

（1）創建request.js文件，在該文件中編寫Ajax請求方法。

（2）新建文件上傳頁index.jsp，在該頁中添加用于獲得上傳文件信息的表單以及表單元素，并添加用于顯示進度條的<div>標簽和顯示百分比的<span>標簽，關鍵代碼如下：

<form enctype="multipart/form-data" method="post" action="UpLoad?action=uploadFile">

請選擇上傳的文件：<input name="file" type="file" size="34">

注：文件大小請控制在50M以內。

<div id="progressBar" class="prog_border" align="left"><img src="images/progressBar.gif" width="0" height="13" id="imgProgress"></div><span id="progressPercent" style="width:40px;display:none">0%</span><input name="Submit" type="button" value="提交" onClick="deal(this.form)"><input name="Reset" type="reset" class="btn_grey" value="重置"></td></form>