這篇文章給大家介紹如何在Struts2中使用uploadify實現(xiàn)多文件上傳,內(nèi)容非常詳細(xì),感興趣的小伙伴們可以參考借鑒,希望對大家能有所幫助。
讓客戶滿意是我們工作的目標(biāo),不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶,將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴,公司提供的服務(wù)項目有:域名注冊、虛擬主機(jī)、營銷軟件、網(wǎng)站建設(shè)、河津網(wǎng)站維護(hù)、網(wǎng)站推廣。
導(dǎo)入相關(guān)的CSS JS
<link rel="stylesheet" type="text/css" href="<%=basePath%>css/uploadify/uploadify.css" rel="external nofollow" > <script src="<%=basePath%>js/jquery.min.js"></script> <script src="<%=basePath%>js/uploadify/jquery.uploadify.min.js"></script>
接下來是 上傳的 JSP 頁面代碼
<form action="" method="post" > <input type="file" name="img_file" id="img_file"> <div id="uploadfileQueue" ></div> <div id="imgs" ></div> <div id="dialog-message" ></div> </form> <p> <a href="javascript:void(0);" rel="external nofollow" onclick="myUpload()">上傳</a> <a href="javascript:$('#img_file').uploadify('cancel')" rel="external nofollow" >取消上傳</a> </p>
這里是最關(guān)鍵的JS 代碼,有注釋
$(function(){ $("#img_file").uploadify({ auto:false,//是否自動上傳 height: 30, buttonText:'選擇圖片', cancelImage:'<%=basePath%>img/uploadify/uploadify-cancel.png', swf : '<%=basePath %>js/uploadify/uploadify.swf', // expressInstall:'js/uploadify/expressInstall.swf', uploader : '<%=basePath%>json/fileUploadAction.action', //后臺處理上傳文件的action width : 120 , 'multi': true, //設(shè)置為true將允許多文件上傳 'filesSelected': '4', queueID:'uploadfileQueue', fileObjName:'img_file', //與后臺Action中file屬性一樣 /* formData:{ //附帶值 'userid':'111', 'username':'tom', 'rnd':'111' }, */ fileTypeDesc:'上傳文件支持的文件格式:jpg,jpge,gif,png', fileTypeExts:'*.jpg;*.jpge;*.gif;*.png',//*.jpg;*.jpge;*.gif;*.png queueSizeLimit : 4,//只能一次上傳4張圖片 // simUploadLimit:1,//一次可以上傳1個文件 fileSizeLimit:'2097152',//上傳文件最大值 單位為字節(jié) 2M //返回一個錯誤,選擇文件的時候觸發(fā) onSelectError:function(file, errorCode, errorMsg){ switch(errorCode) { case -100: alert("上傳的文件數(shù)量已經(jīng)超出系統(tǒng)限制的4個文件!"); break; case -110: alert("文件 ["+file.name+"] 大小超出系統(tǒng)限制的2M大小!"); break; case -120: alert("文件 ["+file.name+"] 大小異常!"); break; case -130: alert("文件 ["+file.name+"] 類型不正確!"); break; } }, // //上傳到服務(wù)器,服務(wù)器返回相應(yīng)信息到data里 onUploadSuccess:function(file, data, response){ var objs = eval('('+data+')'); var phtml = "<span><img style='width:150;height:150' src='/uploads/"+objs.filename+"'></span>"; if($("#imgs span").length==0){ $("#imgs").html(phtml); }else{ $("#imgs span:last").after(phtml); } }, onSelect : function(file) { //alert(file.name); }, //removeCompleted:true,//上傳的文件進(jìn)度條是否消失 requeueErrors:false, // removeTimeout:2,//進(jìn)度條消失的時間,默認(rèn)為3 progressData:"percentage",//顯示上傳的百分比 onUploadError : function(file,errorCode,errorMsg,errorString,swfuploadifyQueue) { //這里是取消的時候發(fā)生 // $("#dialog-message").html(errorString); } }); }); //上傳文件 function myUpload(){ $("#img_file").uploadify('upload','*'); }
java 上傳的Action 代碼
/** * 上傳文件的Action * @author wzh * */ @Controller @Scope("prototype") public class FileUploadAction extends BaseAction { private File img_file; private String img_fileContentType;//格式同上"fileName"+ContentType private String img_fileFileName;//格式同上"fileName"+FileName private String savePath;//文件上傳后保存的路徑 private Map<String, Object> dataMap = new HashMap<String, Object>(); @Override /*** * 上傳文件 */ public String execute() throws Exception{ System.out.println("savePath"+getSavePath()); File dir=new File(getSavePath()); System.out.println(dir.getAbsolutePath()); //判斷是否存在路徑 if(!dir.exists()){ dir.mkdirs(); } //當(dāng)前上傳的文件 File file=getImg_file(); //獲得后綴 String ext =FileUtil.getExtensionName(getImg_fileFileName()); String newFileName = UUID.randomUUID()+ext; FileOutputStream fos=new FileOutputStream(getSavePath()+"//"+newFileName); FileInputStream fis=new FileInputStream(getImg_file()); byte []buffers=new byte[1024]; int len=0; while((len=fis.read(buffers))!=-1){ fos.write(buffers,0,len); } fos.close(); fis.close(); // String uploadFileName = getImg_fileFileName(); dataMap.put("filename",newFileName); return SUCCESS; }
<!-- 文件上傳相關(guān)的 --> <action name="fileUploadAction" class="fileUploadAction"> <param name="savePath">E:/Tomcat6.0/webapps/uploads</param> <result type="json"> <param name="root">dataMap</param> </result> </action>
關(guān)于如何在Struts2中使用uploadify實現(xiàn)多文件上傳就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學(xué)到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
當(dāng)前文章:如何在Struts2中使用uploadify實現(xiàn)多文件上傳
轉(zhuǎn)載來源:http://aaarwkj.com/article2/jejsoc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供商城網(wǎng)站、服務(wù)器托管、ChatGPT、營銷型網(wǎng)站建設(shè)、搜索引擎優(yōu)化、關(guān)鍵詞優(yōu)化
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)