在Struts2中使用Uploadify組件上傳文件

 Uploadify是一個基於Jquery的文件上傳組件，官網http://www.uploadify.com/可以在官網獲得該組件，運行演示示例，下載幫助文檔。
    作爲Web前端的增強技術，Jquery給用戶以更好的體驗和交互，增強富互聯網客戶端特效，而基於Jquery的Uploadify更是將文件上傳效果發揮到極致。
    一個項目下，需要開發一個上傳文件的應用，項目基於Struts2，傳統使用input標籤的file屬性上傳是同步的，沒有實時效果的。爲了增強體驗，一個偶然的機會讓我發現了這個組件Uploadify。但是官方僅提供基於PHP的上傳源碼，那麼在Struts2下的，就得自行研究了。
    廢話不多說，讓我們一步一步領略Uploadify帶來的不同感受。
1.支持的文件
jquery.js,jquery.uploadify.js,uploadify.css;怎獲得就不多說了。
2.HTML頁面源碼

<style type="text/css">
div.demo {
    padding: 20px;
    border: 1px solid #E5E5E5;
    margin-bottom: 20px;
    background-color: #FFFFFF;
}
</style>

<style type="text/css">
div.demo {
	padding: 20px;
	border: 1px solid #E5E5E5;
	margin-bottom: 20px;
	background-color: #FFFFFF;
}
</style>

<script language="javascript" src="/js/swfobject.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#upload").uploadify({        'uploader'       : '${base}/images/swf/uploadify.swf',
    'script'         : 'disk!uploadFile.action',
    'cancelImg'      : '${base}/images/cancel.png',
    'fileDataName'   : 'upload',
    'folder'         : '/',
    'displayData'    : 'speed',
    'buttonText'     : 'Browse Files',
    'auto'           : false,
    'multi'          : true,
    'sizeLimit'      : 1073741824,
    'simUploadLimit' : 3
    });
});
</script>

<script language="javascript" src="/js/swfobject.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("#upload").uploadify({		'uploader'       : '${base}/images/swf/uploadify.swf',
	'script'         : 'disk!uploadFile.action',
	'cancelImg'      : '${base}/images/cancel.png',
	'fileDataName'   : 'upload',
	'folder'         : '/',
	'displayData'    : 'speed',
	'buttonText'     : 'Browse Files',
	'auto'           : false,
	'multi'          : true,
	'sizeLimit'      : 1073741824,
	'simUploadLimit' : 3
	});
});
</script>

<div class="demo" style="display:none" id="upload_file">
<p><strong>文件上傳</strong></p>
<input id="upload" name="upload" type="file" />
<a href="javascript:$('#upload').uploadifyUpload();">開始上傳</a> | <a href="javascript:$('#upload').uploadifyClearQueue();">清除隊列</a>
</div>

<div class="demo" style="display:none" id="upload_file">
<p><strong>文件上傳</strong></p>
<input id="upload" name="upload" type="file" />
<a href="javascript:$('#upload').uploadifyUpload();">開始上傳</a> | <a href="javascript:$('#upload').uploadifyClearQueue();">清除隊列</a>
</div>

解釋：
1).css是文件上傳框的效果，不多說
2).重點是JS代碼，基於Jquery的技術，函數頭就不多解釋了。
    uploader:是組件自帶的flash，用於打開選取本地文件的按鈕
    scrpit:處理上傳的路徑，這裏使用Struts2，當然是XXX.action
    cancelImg:取消上傳文件的按鈕圖片，就是個叉叉
    fileDataName:和input的name屬性值保持一致就好，Struts2就能處理了
    folder:沒研究這個，根據幫助文檔就寫上/
    displayData:有speed和percentage兩種，一個顯示速度，一個顯示完成百分比
    buttonText:出現在Flash上的文字，暫時還不支持中文
    auto:是否選取文件後自動上傳
    multi:是否支持多文件上傳
    sizeLimit:限制文件的大小，這裏是1G，做測試
    simUploadLimit:每次最大上傳文件數
3).最後的html段提供兩個功能按鈕，點擊開始上傳和清除上傳隊列
3.Action源碼

    private File upload;//和HTML中input標記name同名
    private String uploadFileName;//Struts2攔截器獲得的文件名
    public void setUpload(File upload) {
        this.upload = upload;
    }
    public void setUploadFileName(String uploadFileName) {
        this.uploadFileName = uploadFileName;
    }
public String uploadFile() throws Exception {
                  //省略數據處理步驟
        upload.renameTo(new File(realURL));
                  //省略數據庫寫入步驟
        return "uploadFile";
    }

	private File upload;//和HTML中input標記name同名
	private String uploadFileName;//Struts2攔截器獲得的文件名
	public void setUpload(File upload) {
		this.upload = upload;
	}
	public void setUploadFileName(String uploadFileName) {
		this.uploadFileName = uploadFileName;
	}
public String uploadFile() throws Exception {
                  //省略數據處理步驟
		upload.renameTo(new File(realURL));
                  //省略數據庫寫入步驟
		return "uploadFile";
	}

效果圖