實(shí)例解析AJAX與JSF實(shí)現(xiàn)帶進(jìn)度條的批量上傳_JSP教程

教程Tag：暫無(wú)Tag,歡迎添加,賺取U幣!

推薦：實(shí)例解析Java/JSP中調(diào)用SQL Server存儲(chǔ)過(guò)程
最近做了個(gè)Java的小項(xiàng)目（第一次寫Java的項(xiàng)目哦），到網(wǎng)上搜索了半天，找到了一個(gè)比較好點(diǎn)的調(diào)用存儲(chǔ)過(guò)程的例子，而且網(wǎng)上普遍采用的都是setXXX((int parameterIndex, XXX x)的形式。這種形式感覺(jué)不是很直觀，下面就發(fā)布一個(gè)完整的采用setXXX(String param

一。NetBeans 5.5.1 中的樣例：

在NetBeans 5.5.1中自帶了一個(gè)“文件上載“的例子，使用這個(gè)例子，請(qǐng)先下載并安裝以下軟件:

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中，選擇菜單“新建項(xiàng)目”-〉“類別”中選擇“樣例”-〉“Java BluePrint Solution” ->AJAX編程模型。項(xiàng)目中選擇“文件上載”。項(xiàng)目名缺省為“fileupload”

運(yùn)行項(xiàng)目“fileupload”, 并且選擇幾個(gè)上傳文件，文件類型可以多種多樣，比如pdf, jar, ra, zip, jpeg, gif等等�？梢钥吹饺缦陆缑妗�

傳輸完畢，可以看到如下結(jié)果。

顯示了上傳文件開始，結(jié)束的的時(shí)間，上傳文件總的字節(jié)數(shù)目等等。

項(xiàng)目“fileupload”的/web/docs/下有一個(gè)fileupload.html 的文檔，解釋了這個(gè)上傳文件的參數(shù)及使用（English）。文件上載是一個(gè)JSF控件，開發(fā)者需要了解的除了如何在服務(wù)器端處理請(qǐng)求中的參數(shù)，如何在客戶端顯示響應(yīng)信息外，所需要了解的僅僅是一些參數(shù)的設(shè)置。如這個(gè)例子中的代碼所示：

<ui:fileUploadTag id="TestFileuploadForm0" retFunction="testRetFunction" retMimeType="text/xml"

postProcessingMethod="#{FileUploadCustomBean.postProcessingMethod}"

progressBarDivId="progress1x" progressBarSubmitId="submit1x" progressBarSize="40">

</ui:fileUploadTag>

參數(shù)如下：

id	文件上載JSF控件的標(biāo)識(shí)
serverLocationDir	文件上載的目標(biāo)目錄。在示范例子中未給出這個(gè)參數(shù)的應(yīng)用。缺省的情況下，文件會(huì)上載到Sun application Server 的domains/domain1/lib/upload目錄下。
retFunction	JavaScript 的回調(diào)函數(shù)，用于客戶端出來(lái)服務(wù)器返回的響應(yīng)信息。
retMimeType	服務(wù)器端返回響應(yīng)信息的類型，缺省的是“text/xml ”
postProcessingMethod	服務(wù)器端用來(lái)處理請(qǐng)求信息的方法。
progressBarDivId	進(jìn)度條的Id
progressBarSubmitId	和進(jìn)度條關(guān)聯(lián)的觸發(fā)文件上載的id。示范例子中是“submit”按鈕
progressBarSize	進(jìn)度條的大小

二。使用FileUpload控件建立實(shí)例PhotoAlbum

下面給出另外一個(gè)使用這個(gè)上傳文件的小例子PhotoAlbum，最主要是為了說(shuō)明如何提取上傳后的文件名，以及如何用AJAX技術(shù)來(lái)部分刷新上傳頁(yè)面。另外想借這個(gè)例子用 NetBeans開發(fā)JSF程序的一般流程。

1。NetBeans中選擇菜單“新建項(xiàng)目”。“類別“中選擇“Web”, 項(xiàng)目中選擇“Web應(yīng)用程序”。

2。“新建Web應(yīng)用程序”窗口中，輸入及選擇以下內(nèi)容：

項(xiàng)目名稱：PhotoAlbum

源代碼結(jié)構(gòu)：Java BluePrints

服務(wù)器：Sun Java System Application Server 9

Java EE 版本：Java EE 5

注意：如果服務(wù)器選擇中沒(méi)有出現(xiàn)“Sun Java System Application Server 9”。請(qǐng)?jiān)?font face="Thorndale, serif">NetBeans中，選擇菜單” 窗口”->“ 運(yùn)行時(shí)”. 在”運(yùn)行環(huán)境”窗口中,鼠標(biāo)右鍵選擇”服務(wù)器”, 點(diǎn)擊”添加服務(wù)器”。在”平臺(tái)文件夾位置”中選擇安裝”Sun Java System Application Server 9”的目錄。在下一個(gè)窗口中，輸入服務(wù)器的管理用戶名和密碼(缺省管理用戶名和密碼是“ admin/adminadmin”)�！�

3。下一個(gè)窗口中，選擇“Java Server Faces”框架。點(diǎn)擊“完成”

4。選擇項(xiàng)目“PhotoAlbum”中的庫(kù)，右鍵選擇“添加jar/文件夾”，加入文件上載所需要的幾個(gè)jar文件。在NetBeans安裝目錄下，例如C:\Java\netbeans-5.5.1\enterprise3\modules\ext\blueprints，加入以下五個(gè)jar文件

shale-remoting.jar

bp-ui-5.jar

commons-logging-1.1.jar

commons-io-1.2.jar

commons-fileupload-1.1.1.jar

需要注意的是: 為了完成下面的例子,有兩個(gè)jar文件需要比較新的版本,并且需要加入庫(kù)rome-0.8.jar. 為方便起見(jiàn)，本文給出下載的jar文件，

最后的庫(kù)文件為六個(gè):

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。在項(xiàng)目“PhotoAlbum”中的Web目錄下，手工創(chuàng)建一個(gè)目錄images. 如果PhotoAlbum的工作目錄是e:\mymodules\PhotoAlbum, 那么這個(gè)目錄的絕對(duì)路徑是:E:\mymodules\PhotoAlbum\web\images.

6。創(chuàng)建JSF Bean, 鼠標(biāo)右鍵點(diǎn)擊項(xiàng)目“PhotoAlbum”中，選擇“新建文件/文件夾”。在類別中選擇“Web”, 在“文件類型”中選擇“JSF受管Bean”

7。“新建JSF受管Bean”窗口中，輸入：

類名：FileUploadBackBean

包：com.sun.sdn.demo.jsf

這步創(chuàng)建完之后，可以查看項(xiàng)目“PhotoAlbum”中“配置文件“下的“faces-config.xml”, 可以看到剛創(chuàng)建的“FileUploadBackBean”已經(jīng)自動(dòng)加入到配置文件中。

<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;
/** *//**
*
* @author Ada Li
*/
public class FileUploadBackBean {
/** *//**
* <p>Factory for response writers that we can use to construct the
* outgoing response.</p>
*/
private static ResponseFactory factory = new ResponseFactory();
private String serverLocationDir = "E:/mymodules/PhotoAlbum/build/web/images";
String imageRootUrl = "../images";

/** *//** Creates a new instance of FileUploadBackBean */
public FileUploadBackBean() {
}
public void postProcessingMethod(FacesContext context, Hashtable htUpload, FileUploadStatus status) {
// set custom return enabled so Phaselistener knows not to send default response
status.enableCustomReturn();
// Acquire a response containing these results
ResponseWriter writer = factory.getResponseWriter(context, "text/xml");
try {
writer.startElement("response", null);

String imageFileLocation = "";
for (Enumeration e = htUpload.keys() ; e.hasMoreElements() ;) {
String key = (String)e.nextElement();
//System.out.println(key.substring(0, 13));
if (key.substring(0, 13).equals("fileLocation_")){
imageFileLocation = (String)htUpload.get(key);
String fileName = imageFileLocation.replaceFirst(getServerLocationDir(), "");
String imageFileUrl = imageRootUrl + fileName;
writer.startElement("imageFileUrl", null);
writer.write(imageFileUrl);
writer.endElement("imageFileUrl");
}
}
writer.endElement("response");
writer.flush();
} catch (IOException iox) {
System.out.println("FileUploadPhaseListener error writting AJAX response : " + iox);
}
}
public String getServerLocationDir() {
return serverLocationDir;
}
public void setServerLocationDir(String serverLocationDir) {
this.serverLocationDir = serverLocationDir;
}
}

FileUploadBackBean中有兩個(gè)參數(shù)需要根據(jù)情況設(shè)定，即 serverLocationDir 和 imageRootUrl 。因?yàn)镻hotoAlbum缺省部署完成后，項(xiàng)目在應(yīng)用服務(wù)器中的部署位置就是/build目錄。在這個(gè)例子中，文件上載到/build/images目錄下，因此還需要手工在PhotoAlbum的web目錄下建立一個(gè)images目錄，PhotoAlbum部署完成后，在/build/目錄下自動(dòng)會(huì)建立images目錄。

上載后的文件放在/build/images目錄下，通過(guò)瀏覽器訪問(wèn)的話，URL是http://localhost:8080/PhotoAlbum/images/XXXX.jpg, 因此，獲得上傳的文件名之后，之前要加上相對(duì)路徑“../images”.

文件中方法 postProcessingMethod 的主要作用是提取上傳文件名，并生成xml格式的響應(yīng)信息。信息的格式如下：

<response>
<imageFileUrl>../images/Bike.jpg</imageFileUrl>
<imageFileUrl>../images/Bungee.jpg</imageFileUrl>
<imageFileUrl>../images/Duke.in.City.jpg</imageFileUrl>
<imageFileUrl>../images/Pointing.jpg</imageFileUrl>
<imageFileUrl>../images/Thiniing.jpg</imageFileUrl>
</response>
9�，F(xiàn)在開始寫JSP頁(yè)面。在PhotoAlbum項(xiàng)目中，加入JSF框架之后，項(xiàng)目中自動(dòng)加入了一個(gè)WelcomJSF.jsp頁(yè)面。修改后的WelcomJSF.jsp代碼如下：

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@taglib uri="http://java.sun.com/blueprints/ui" prefix="ui" %>
<html>
<head>
<title>AJAX與JSF實(shí)現(xiàn)帶進(jìn)度條的批量文件上載</title>
<script>

function props(namex) {
var listx="";
var ob=dojo.byId(namex);
for(xx in ob) {
listx += xx + " = " + ob[xx] + "<br/>"
}
//document.write(listx);
alert(listx);
}

function testRetFunction(type, data, evt){
// handle successful response here
var photoAlbum = document.getElementById("photo_album");
var resultx = data.getElementsByTagName("response")[0];
if(resultx) {
var photoAlbum = document.getElementById("photo_album");

var tb = document.createElement("table");
tb.setAttribute("border", 1);
var tbody = document.createElement("tbody");
var tr = document.createElement("tr");
tb.insertBefore(tbody, null);
tbody.insertBefore(tr, null);
photoAlbum.insertBefore(tb, null);

var imageUrls = resultx.getElementsByTagName("imageFileUrl");
for (var i=0; i<imageUrls.length; i++){
var td = document.createElement("td");
td.setAttribute("width", "20%");
td.setAttribute("valigh", "top");

var url = imageUrls[i].childNodes[0].nodeValue;
var image = document.createElement("img");
image.setAttribute("src", url);
image.setAttribute("width", "100");

td.insertBefore(image, null);
tr.insertBefore(td, null);
}
}
}

</script>
</head>
<body>
<h1>AJAX與JSF實(shí)現(xiàn)帶進(jìn)度條的批量文件上載</h1>

<f:view>

在welcomeJSF.jsp頁(yè)面中,重點(diǎn)就是JavaScript函數(shù) testRetFunction(), 它作為AJAX中客戶端的回調(diào)函數(shù), 接受來(lái)自服務(wù)器端的響應(yīng)信息后,通過(guò)DOM技術(shù), 在原有頁(yè)面上,動(dòng)態(tài)地創(chuàng)建了table及img 對(duì)象,來(lái)顯示上傳的圖像.
在 FileUploadBackBean 聲明了屬性 serverLocationDir ，并且有對(duì)這個(gè)屬性的set和get方法，那么在JSF中，對(duì)這個(gè)屬性的調(diào)用可以直接是#{FileUploadBackBean.serverLocationDir}。

10。運(yùn)行的結(jié)果如下

三。小結(jié)

JSF(JavaServer Faces)主要的目的是把表示和動(dòng)作分開。在通常的JSP開發(fā)中， Http請(qǐng)求映射到事件處理器，在服務(wù)器端操作頁(yè)面控件，都不是很方便。而JSF技術(shù)分離了動(dòng)作和表示，可以讓開發(fā)者更專注于自己的領(lǐng)域，而把一些映射的工作或者底層的工作交給框架來(lái)實(shí)現(xiàn)。

JSF提供了大量的tab library, 前面的文件上載的控件就是其中之一。在使用這個(gè)控件的時(shí)候，可以注意到，編寫Bean時(shí)，并不需要直接從HttpRequest中讀取參數(shù)值，并且在返回響應(yīng)信息時(shí)候，也并沒(méi)有在代碼中直接指定具體的頁(yè)面。AJAX在JSF的應(yīng)用中，體現(xiàn)在增加了JavaScript回調(diào)函數(shù)的接口，就是WelcomJSF.jsp中的函數(shù)testRetFunction()。

分享：如何在Struts 2中實(shí)現(xiàn)文件上傳
前一陣子有些朋友在電子郵件中問(wèn)關(guān)于Struts 2實(shí)現(xiàn)文件上傳的問(wèn)題，所以今天我們就來(lái)討論一下這個(gè)問(wèn)題。實(shí)現(xiàn)原理 Struts 2是通過(guò)Commons FileUpload文件上傳。Commons FileUpload通過(guò)將HTTP的數(shù)據(jù)保存到臨時(shí)文件夾，然后Struts使用fileUpload攔截器將文件綁