AJAX與JSF實現帶進度條的批量上傳檔案執行個體

一。NetBeans 5.5.1 中的範例：

在NetBeans 5.5.1中內建了一個“檔案上傳“的例子，使用這個例子，請先下載並安裝以下軟體:

JAVA SE 5 (JDK 1.5) 及以上版本（http://java.sun.com/javase/downloads/index.jsp ）

NetBeans 5.5.1（http://zh-cn.netbeans.org/index_zh_CN.html ）

Sun Application Server 9.0（https://glassfish.dev.java.net/）

 

2+3也可以下載“NetBeans IDE 5.5.1 with Java EE Application Server 9.0 U1 Patch 1 bundle ”（http://www.netbeans.info/downloads/index.php?rs=22&p=3）

在NetBeans中，選擇菜單“建立項目”-〉“類別”中選擇“範例”-〉“Java BluePrint Solution” ->AJAX編程模型。項目中選擇“檔案上傳”。項目名預設為“fileupload”

運行項目“fileupload”, 並且選擇幾個上傳檔案，檔案類型可以多種多樣，比如pdf, jar, ra, zip, jpeg, gif等等。可以看到如下介面。

傳輸完畢，可以看到如下結果。

顯示了上傳檔案開始，結束的的時間，上傳檔案總的位元組數目等等。

項目“fileupload”的/web/docs/下有一個fileupload.html 的文檔，解釋了這個上傳檔案的參數及使用（English）。檔案上傳是一個JSF控制項，開發人員需要瞭解的除了如何在伺服器端處理請求中的參數，如何在用戶端顯示響應資訊外，所需要瞭解的僅僅是一些參數的設定。如這個例子中的代碼所示：

參數如下：

id	檔案上傳JSF控制項的標識
serverLocationDir	檔案上傳的目標目錄。在示範例子中未給出這個參數的應用。預設的情況下，檔案會上傳到Sun application Server 的domains/domain1/lib/upload目錄下。
retFunction	JavaScript 的回呼函數，用於用戶端出來伺服器返回的響應資訊。
retMimeType	伺服器端返迴響應資訊的類型，預設的是“text/xml ”
postProcessingMethod	伺服器端用來處理請求資訊的方法。
progressBarDivId	進度條的Id
progressBarSubmitId	和進度條關聯的觸發檔案上傳的id。示範例子中是“submit”按鈕
progressBarSize	進度條的大小

二。使用FileUpload控制項建立執行個體PhotoAlbum

下面給出另外一個使用這個上傳檔案的小例子PhotoAlbum，最主要是為了說明如何提取上傳後的檔案名稱，以及如何用AJAX技術來部分重新整理上傳頁面。另外想借這個例子用 NetBeans開發JSF程式的一般流程。

1。NetBeans中選擇菜單“建立項目”。“類別“中選擇“Web”, 項目中選擇“Web應用程式”。

2。“建立Web應用程式”視窗中，輸入及選擇以下內容：

項目名稱：PhotoAlbum

原始碼結構：Java BluePrints

伺服器：Sun Java System Application Server 9

Java EE 版本：Java EE 5

注意：如果伺服器選擇中沒有出現“Sun Java System Application Server 9”。請在NetBeans中，選擇菜單” 視窗”->“ 運行時”. 在”運行環境”視窗中,滑鼠右鍵選擇”伺服器”, 點擊”添加伺服器”。在”平台檔案夾位置”中選擇安裝”Sun Java System Application Server 9”的目錄。在下一個視窗中，輸入伺服器的系統管理使用者名和密碼(預設系統管理使用者名和密碼是“ admin/adminadmin”)。　

3。下一個視窗中，選擇“Java Server Faces”架構。點擊“完成”

4。選擇項目“PhotoAlbum”中的庫，右鍵選擇“添加jar/檔案夾”，加入檔案上傳所需要的幾個jar檔案。在NetBeans安裝目錄下，例如C:/Java/netbeans-5.5.1/enterprise3/modules/ext/blueprints，加入以下五個jar檔案

shale-remoting.jar

bp-ui-5.jar

commons-logging-1.1.jar

commons-io-1.2.jar

commons-fileupload-1.1.1.jar

需要注意的是: 為了完成下面的例子,有兩個jar檔案需要比較新的版本,並且需要加入庫rome-0.8.jar. 為方便起見，本文給出下載的jar檔案，

最後的庫檔案為六個:

             shale-remoting-1.0.4.jar (http://download.csdn.net/source/236129)

bp-ui-5-0.8.jar (http://download.csdn.net/source/236127)

rome-0.8.jar (http://download.csdn.net/source/236128)

commons-logging-1.1.jar

commons-io-1.2.jar

commons-fileupload-1.1.1.jar

 

5。在項目“PhotoAlbum”中的Web目錄下，手工建立一個目錄images. 如果PhotoAlbum的工作目錄是e:/mymodules/PhotoAlbum, 那麼這個目錄的絕對路徑是:E:/mymodules/PhotoAlbum/web/images.

6。建立JSF Bean, 滑鼠右鍵點擊項目“PhotoAlbum”中，選擇“建立檔案/檔案夾”。在類別中選擇“Web”, 在“檔案類型”中選擇“JSF受管Bean”

7。“建立JSF受管Bean”視窗中，輸入：

類名：FileUploadBackBean

包：com.sun.sdn.demo.jsf

這步建立完之後，可以查看項目“PhotoAlbum”中“設定檔“下的“faces-config.xml”, 可以看到剛建立的“FileUploadBackBean”已經自動加入到設定檔中。

           < managed-bean >
             < managed-bean-name > FileUploadBackBean </ managed-bean-name >
             < managed-bean-class > com.sun.sdn.demo.jsf.FileUploadBackBean </ managed-bean-class >
             < managed-bean-scope > request </ managed-bean-scope >
         </ managed-bean >

8。在 FileUploadBackBean 加入如下代碼：

  /**/ /*
 * FileUploadBackBean.java
 *
 * Created on 2007年8月27日, 下午2:48
 *
 * To change this template, choose Tools | Template Manager
 * and open the template in the editor.
 */

package  com.sun.sdn.demo.jsf;
import  java.util.Enumeration;
import  java.util.Hashtable;
import  java.io.IOException;

import  javax.faces.context.FacesContext;
import  javax.faces.context.ResponseWriter;
import  javax.servlet.ServletContext;
import  org.apache.shale.remoting.faces.ResponseFactory;

import  com.sun.javaee.blueprints.components.ui.fileupload.FileUploadStatus;