溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

struts2結(jié)合uploadify3.2實現(xiàn)文件上傳

發(fā)布時間：2020-07-12 20:30:04 來源：網(wǎng)絡(luò) 閱讀：281 作者：HarderXin 欄目：web開發(fā)

1、請下載uploadify3.2插件，下載地址：http://download.csdn.net/detail/harderxin/5515929
4、uploadify官方地址：http://www.uploadify.com/，可以隨時關(guān)注，版本不同，其中內(nèi)置的函數(shù)會有所不同
2、注意：jquery版本須為jquery-1.7.2.min.js，1.4版本不支持，上面下載中的內(nèi)容已經(jīng)包含在里面了，必須安裝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、頁面效果：其中自帶進度條

struts2結(jié)合uploadify3.2實現(xiàn)文件上傳

 

5、頁面js腳本

	<script type="text/javascript">  		$(function() {  			$('#file_upload').uploadify({  				'swf'      : 'uploadify/uploadify.swf',//swf文件  				//指向后臺操作的action，可以帶參數(shù)  				'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) {//每個上傳完成并成功的文件都會觸發(fā)本事件  					if(data=="success"){  						//$('#msg').html('圖片上傳成功!');  					}else{  						top.Dialog.alert("圖片上傳失敗!");  					}      			},      			'onQueueComplete':function(queueData){//隊列全部上傳觸發(fā)函數(shù)      				top.Dialog.alert(queueData.uploadsSuccessful+"張圖片上傳成功!",function(){      					top.Dialog.close();      				});      			},      			//檢測FLASH失敗調(diào)用       			'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的結(jié)合，更多的uploadify3.2版本參數(shù)可參見：

http://www.zhixing123.cn/php/33074.html

實例也可參見：http://www.abc3210.com/2012/js_09/jquery-uploadify.shtml

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手