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>
- <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";
}
效果圖