2019獨角獸企業重金招聘Python工程師標準>>>

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

????效果圖?
?????

轉載于:https://my.oschina.net/huangcongcong/blog/505335

總結

以上是生活随笔為你收集整理的Uploadify——学习（1）：在Struts2的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。