Struts2 + uploadify 多檔案上傳完整執行個體！

標籤：uploadify   多檔案上傳   struts2   

首先我這裡使用的是  Jquery  Uploadify3.2的版本

     匯入相關的CSS  JS   

<link rel="stylesheet" type="text/css" href="<%=basePath%>css/uploadify/uploadify.css">
     <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);" onclick="myUpload()">上傳</a>        <a href="javascript:$('#img_file').uploadify('cancel')">取消上傳</a>      </p>  

這裡是最關鍵的 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, //設定為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;*.pngqueueSizeLimit : 4,//只能一次上傳4張圖片 // simUploadLimit:1,//一次可以上傳1個檔案fileSizeLimit:'2097152',//上傳檔案最大值   單位為位元組   2M                     //返回一個錯誤，選擇檔案的時候觸發onSelectError:function(file, errorCode, errorMsg){ switch(errorCode) {case -100:                                  alert("上傳的檔案數量已經超出系統限制的4個檔案！");                                  break;                              case -110:                                  alert("檔案 ["+file.name+"] 大小超出系統限制的2M大小！");                                  break;                              case -120:                                  alert("檔案 ["+file.name+"] 大小異常！");                                  break;                              case -130:                                  alert("檔案 ["+file.name+"] 類型不正確！");                                  break;                          }                      },  //                        //上傳到伺服器，伺服器返回相應資訊到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,//上傳的檔案進度條是否消失                      requeueErrors:false,                     // removeTimeout:2,//進度條消失的時間，預設為3                      progressData:"percentage",//顯示上傳的百分比                      onUploadError : function(file,errorCode,errorMsg,errorString,swfuploadifyQueue) { //這裡是取消的時候發生                          // $("#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();          }                  //當前上傳的檔案        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;}

<!-- 檔案上傳相關的 --> <action name="fileUploadAction" class="fileUploadAction">        <param name="savePath">E:/Tomcat6.0/webapps/uploads</param>        <result type="json"><param name="root">dataMap</param></result>       </action>

配置完以上的 基本就OK了   有什麼不懂的可以評論問問，我會回複