溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
1、請下載uploadify3.2插件，下載地址：http://download.csdn.net/detail/harderxin/5515929
4、uploadify官方地址：http://www.uploadify.com/，可以隨時關注，版本不同，其中內置的函數會有所不同
2、注意：jquery版本須為jquery-1.7.2.min.js，1.4版本不支持，上面下載中的內容已經包含在里面了，必須安裝swf文件才能運行
3、在jsp頁面中引入插件
<script type="text/javascript" src="uploadify/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="uploadify/uploadify.css" />
<script type="text/javascript" src="uploadify/jquery.uploadify.min.js"></script>
<script type="text/javascript" src="uploadify/jquery.uploadify.js"></script>
4、頁面效果：其中自帶進度條
5、頁面js腳本
<script type="text/javascript"> $(function() { $('#file_upload').uploadify({ 'swf' : 'uploadify/uploadify.swf',//swf文件 //指向后臺操作的action，可以帶參數 'uploader' : 'imageOperate!uploadReportImg.do?reportId=${reportId}&operateType=${operateType}&planId=${planId}', 'auto' : false,//是否自動上傳 'height':25,//按鈕的高度 'multi':true,//是否進行多文件上傳 'buttonText':'選擇文件',//瀏覽文件按鈕文本 'fileObjName':'file',//后臺接收表單控件的名字，必須與后臺名稱保持一致，相當與input type=file的name屬性 'queueID':'fileQueue',//綁定顯示上傳隊列的div 'fileTypeExts':'*.jpg;*.png;*.gif;',//限制文件上傳的類型 'method' : 'post',//提交方式 'removeTimeout':1,//上傳完成后隊列多長時間后消失 'onUploadSuccess' : function(file, data, response) {//每個上傳完成并成功的文件都會觸發本事件 if(data=="success"){ //$('#msg').html('圖片上傳成功!'); }else{ top.Dialog.alert("圖片上傳失敗!"); } }, 'onQueueComplete':function(queueData){//隊列全部上傳觸發函數 top.Dialog.alert(queueData.uploadsSuccessful+"張圖片上傳成功!",function(){ top.Dialog.close(); }); }, //檢測FLASH失敗調用 'onFallback':function(){ top.Dialog.alert("您未安裝FLASH控件，無法上傳圖片！請安裝FLASH控件后再試!"); } }); }); </script>
頁面文件
<body rel="layout"> <input type="hidden" id="reportId" value="${reportId}"/> <input type="hidden" id="planId" value="${planId}"/> <input type="hidden" id="operateType" value="${operateType}"/> <div class="ui-layout-center"> <div class="header"> <table align="center"><tr> <td style="width: 90px;"><input type="file" name="file_upload" id="file_upload" /></td> <td width="90px" align="right"><input type="button" value="開始上傳" $('#file_upload').uploadify('upload','*');" style="background: #505050;color:white;height:28px;margin-bottom: 0.5em;"/></td> <td width="90px" align="right"><input type="button" value="取消上傳" $('#file_upload').uploadify('cancel','*');" style="background: #505050;color:white;height:28px;margin-bottom: 0.5em;"/></td> <td width="90px" align="right"><span style="color:red;" id="msg"></span></td> </tr></table> </div> <div class="content" id="fileQueue" style="margin: 10px 10px 10px 150px"> </div> </div> </body>
6、編寫后臺處理action
/** * 圖像操作Action * @author Administrator * */ public class ImageOperateAction { //文件上傳,與前臺頁面的fileObjName保持一致 private File[] file; private String[] fileFileName; public File[] getFile() { return file; } public void setFile(File[] file) { this.file = file; } public String[] getFileFileName() { return fileFileName; } public void setFileFileName(String[] fileFileName) { this.fileFileName = fileFileName; } /** * 上傳報活圖片 * @return * @throws Exception */ public String uploadReportImg() throws Exception{ //這樣我們就可以得到file和fileName對象，進行我們的邏輯操作啦 System.out.println("file='+file); System.out.println("fileName='+fileFileName[0]); } }
這樣我們就靈活的運用了struts2和uploadify的結合，更多的uploadify3.2版本參數可參見：
http://www.zhixing123.cn/php/33074.html
實例也可參見：http://www.abc3210.com/2012/js_09/jquery-uploadify.shtml
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
