Uploadify——學習（1）：在Struts2的使用

    Uploadify是一個基於Jquery的文件上傳組件，官網http://www.uploadify.com/能夠在官網得到該組件，運行演示示例，下載幫助文檔。 
    做爲Web前端的加強技術，Jquery給用戶以更好的體驗和交互，加強富互聯網客戶端特效，而基於Jquery的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;  
    #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>  


<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";  
    }

    效果圖