Java SSH 項目總結——Struts2上傳圖片組，sshstruts2

Java SSH 項目總結——Struts2上傳圖片組，sshstruts2
前言

 

在一個表單中上傳5張圖片分別隸屬於5類別，在Strust2表單中賦予file控制項的name屬性一樣，實現多張圖片與該圖片隸屬的類別資訊進行提交，後台擷取上傳檔案的數組資訊，然後將圖片和類別資訊進行儲存，完成圖片上傳的功能。

 

本文

 

前台頁面

 

前台代碼

 

</pre><pre name="code" class="html"><s:form  id="fileForm" name="fileForm" enctype="multipart/form-data" method="post" ><table class="table table-bordered table-striped"style="border: #cdcdcd 1px solid; text-align: center;"align="center"><tr><td><font color="red">*</font>一類：<div><input id="materialTypeName" name="materialTypeName1"type="radio" value="企業法人營業執照" checked/>企業法人營業執照<input id="materialTypeName" name="materialTypeName1"type="radio" value="事業單位法人認證" />事業單位法人認證<input id="materialTypeName" name="materialTypeName1"type="radio" value="民辦非企業單位登記認證" />民辦非企業單位登記認證<br /><br /><input id="materialTypeName" name="materialTypeName1"type="radio" value="社會團體法人登記認證"   />社會團體法人登記認證<input id="materialTypeName" name="materialTypeName1"type="radio" value="個人工商戶營業執照" />個人工商戶營業執照<input id="materialTypeName" name="materialTypeName1"type="radio" value="其它" />其它<label class="control-label"></label><div align="right"><s:file id="file1" label="File(1)" name="uploads" /></div></div><input id="materialType1" name="materialType1" type="hidden"value="" /></td></tr><tr><td><div align=left><font color="red">*</font>二類：<label style="font-size: 12px;">中華人民共和國組織機構代碼</label><div align="right"><s:file id="file2" label="File(2)" name="uploads" /></div></div><input id="materialType2" name="materialType1" type="hidden"value="" /><input id="materialTypeName2" name="materialTypeName1"type="hidden" value="" /></td></tr><tr><td><div align=left><font color="red">*</font>三類：<label style="font-size: 12px;">法定代表人身份證</label><div align="right"><s:file id="file3" label="File(3)" name="uploads" /></div></div><input id="materialType3" name="materialType1" type="hidden"value="" /><input id="materialTypeName3" name="materialTypeName1"type="hidden" value="" /></td></tr><tr><td><div align=left>四類：<label style="font-size: 12px;">勞務派遣經驗許可證</label><div align="right"><s:file id="file4" label="File(4)" name="uploads" /></div></div><input id="materialType4" name="materialType1" type="hidden"value="" /><input id="materialTypeName4" name="materialTypeName1"type="hidden" /></td></tr><tr><td><div align=left>五類：<label style="font-size: 12px;">其它</label><div align="right"><s:file id="file5" label="File(5)" name="uploads" /></div></div><input id="materialType5" name="materialType1" type="hidden"value="" /><input id="materialTypeName5" name="materialTypeName1"type="hidden" /></td></tr><tr><td><div align="center"><input id="picButton" type="button" value="提交申請" onclick="validate()"   class="btn btn-primary"></input></div></td></tr></table></s:form>

 

 

 

前端的核心代碼是下面的這個file標籤數組，name屬性一樣，這樣就可以將圖片批量提交到action，action類中接收圖片數組。

<s:fileid="file1" label="File(1)" name="uploads" />

<s:fileid="file2" label="File(2)" name="uploads" />

<s:fileid="file3"label="File(3)"name="uploads" />

<s:fileid="file4"label="File(4)"name="uploads" />

<s:fileid="file5"label="File(5)"name="uploads" />

 

 

Js代碼

 

在js中我們對上傳圖片的格式進行了驗證，同時得到每張圖片所屬類別的資訊，然後將圖片和類別資訊進行Form表單提交

 

//驗證圖片格式function validateFileFormat(){//擷取欲上傳的檔案路徑var filepath1 = document.getElementById('file1').value; var d1=/\.[^\.]+$/.exec(filepath1);var filepath2 = document.getElementById('file2').value; var d2=/\.[^\.]+$/.exec(filepath2);var filepath3 = document.getElementById('file3').value; var d3=/\.[^\.]+$/.exec(filepath3);var filepath4 = document.getElementById('file4').value; var d4=/\.[^\.]+$/.exec(filepath4);var filepath5 = document.getElementById('file5').value; var d5=/\.[^\.]+$/.exec(filepath5); //為了避免轉義反斜線出問題，這裡將對其進行轉換        var tp =".jpg,.image,.gif,.jpeg,.png,.bmp,.JPG,.GIF,.BMP,.IMAGE,.JPEG,.PNG";        //返回合格尾碼名在字串中的位置        var rs1=tp.indexOf(d1);        var rs2=tp.indexOf(d2);        var rs3=tp.indexOf(d3);        var rs4=tp.indexOf(d4);        var rs5=tp.indexOf(d5);        //如果返回的結果大於或等於0，說明包含允許上傳的檔案類型        if(rs1>=0){            if(rs2>=0){                if(rs3>=0){                if(filepath4==""){                 if(filepath5==""){                                 return true;      }else{               if(rs5>=0){         return true;        }else{                    alert("您選擇五類型的掃描件不是有效圖片格式!");                    return false;           }}        }else{         if(rs4>=0){         if(filepath5==""){                return true;        }else{         if(rs5>=0){         return true;        }else{                    alert("您選擇五類型的掃描件不是有效圖片格式!");                    return false;           }}        }else{                    alert("您選擇四類型的掃描件不是有效圖片格式!");                    return false;           }}                                          }else{                  alert("您選擇三類型的掃描件不是有效圖片格式!");                  return false;               }                   }else{                alert("您選擇二類型的掃描件不是有效圖片格式!");                return false;           }             }else{          alert("您選擇一類型的掃描件不是有效圖片格式!");          return false;        }}//上傳檔案驗證function fileValidate(){  var fileName1=document.getElementById('file1').value;  var fileName2=document.getElementById('file2').value;  var fileName3=document.getElementById('file3').value;  var fileName4=document.getElementById('file4').value;  var fileName5=document.getElementById('file5').value;if(!fileName1){alert("請選擇上傳檔案：一類");return false; }else{document.getElementById('materialType1').value="1";}if(!fileName2){alert("請選擇上傳檔案：二類");return false; }else{document.getElementById('materialType2').value="2";document.getElementById('materialTypeName2').value="中華人民共和國組織機構代碼";}if(!fileName3){alert("請選擇上傳檔案：三類");return false; }else{document.getElementById('materialType3').value="3";document.getElementById('materialTypeName3').value="法定代表人身份證";}if(fileName4){document.getElementById('materialType4').value="4";document.getElementById('materialTypeName4').value="勞務派遣經驗許可證";//alert(document.getElementById('materialTypeName4').value)}if(fileName5){document.getElementById('materialType5').value="5";document.getElementById('materialTypeName5').value="其它";//alert(document.getElementById('materialTypeName5').value)}return true;}//上傳圖片function validate(){//驗證圖片格式是否正確var flag=validateFileFormat();if(flag==true){//alert("圖片格式是正確，結果是："+flag);//圖片上傳的參數準備var flagss=fileValidate();if(flagss==true){//alert("圖片上傳最後的驗證，結果是："+flagss);//alert("檔案要上傳了");//檔案表單提交document.fileForm.action="companyMaterial_add.action";document.fileForm.submit();}}}

 

 

 

 

action中的方法

 

在action類中，我們利用get和set方法將檔案上傳的屬性注入到此action類中，包括uploads、uploadsContentType、uploadsFileName，要注意的是uploads是前台標籤的的name，一定要保持一致。得到上傳的檔案的資訊後，我們將檔案上傳的伺服器指定的檔案夾下，然後將檔案的資訊儲存到資料庫中。

 

package cn.bjjczb.jyzgcx.view.action;import java.io.File;import java.io.IOException;import java.text.SimpleDateFormat;import java.util.Date;import java.util.List;import org.apache.commons.io.FileUtils;import org.apache.struts2.ServletActionContext;import org.springframework.context.annotation.Scope;import org.springframework.stereotype.Controller;import com.opensymphony.xwork2.ActionContext;import cn.bjjczb.jyzgcx.base.BaseAction;import cn.bjjczb.jyzgcx.domain.CompanyInfo;import cn.bjjczb.jyzgcx.domain.CompanyMaterial;import cn.bjjczb.jyzgcx.domain.DictionaryTitle;import cn.bjjczb.jyzgcx.domain.ReplyResult;@Controller@Scope("prototype")public class CompanyMaterialAction extends BaseAction<CompanyMaterial> {    private List<File> uploads;  // 上傳多個檔案的集合文本      private List<String> uploadsContentType;  // /多個上傳檔案的類型集合      private List<String> uploadsFileName; // 多個上傳檔案的檔案名稱集合      private List<String> materialTypeName1;private List<String> materialType1;          /** 添加*/public String add() throws Exception {//從session中得到上傳材料的使用者的資訊CompanyInfo returncompanyInfo = this.getCompanyInfo();  String comId=returncompanyInfo.getOrganizationCode();String socId=returncompanyInfo.getSocialNumber();CompanyInfo companyInfo=new CompanyInfo();//得到第一類型的材料類別和名稱List<String> materialTypeList=this.getMaterialType1();List<String> materialTypeNameList=this.getMaterialTypeName1();//列印前台表單提交過來的檔案數組的屬性System.out.println(uploadsFileName);System.out.println(materialTypeList);System.out.println(materialTypeNameList);// 把上傳的檔案放到指定的路徑下         String path = ServletActionContext.getServletContext().getRealPath("/uploadImages");       // 寫到指定的路徑中         File file = new File(path);       // 如果指定的路徑沒有就建立         if (!file.exists()) {             file.mkdirs();         }      // 把得到的檔案的集合通過迴圈的方式讀取並放在指定的路徑下         System.out.println(uploads.size());       for (int i = 0; i < uploads.size(); i++) {             try {            Date date=new Date();              //list集合通過get(i)的方式來擷取索引             System.out.println(uploadsFileName.get(i));                   SimpleDateFormat stingDateFormat  = new SimpleDateFormat("yyyyMMddHHmmss");           String wordfileadd = stingDateFormat.format(date)+socId+uploadsFileName.get(i);              FileUtils.copyFile(uploads.get(i), new File(file, wordfileadd));           } catch (IOException e) {                e.printStackTrace();             }         }            //儲存材料到資料庫       String fileFolder = "\\"+"jyzgcx"+"\\"+"uploadImages"+"\\";       int n=uploadsFileName.size(); //調用方法儲存材料到資料庫   this.DoSaveAll(companyInfo, materialTypeList, materialTypeNameList, uploadsFileName, fileFolder, n);System.out.println("~~~~~~~~~~~~~~上傳成功！");return "repeatLogin";} //儲存圖片到資料庫public void DoSaveAll(CompanyInfo companyInfo,List<String> materialTypeList,List<String> materialTypeNameList,List<String> uploadsFileName,String fileFolder,int s){Date date=new Date();    SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");    String createTime = formatter.format(date);CompanyMaterial companyMaterial = null;CompanyInfo returncompanyInfo = this.getCompanyInfo();String comId=returncompanyInfo.getOrganizationCode();String socId=returncompanyInfo.getSocialNumber();   SimpleDateFormat stingDateFormat  = new SimpleDateFormat("yyyyMMddHHmmss");   String wordfileadd = stingDateFormat.format(date)+socId;for (int i = 0; i < s; i++) {companyMaterial=new CompanyMaterial();companyMaterial.setCompanyInfo(companyInfo);companyMaterial.setState("1");companyMaterial.setCreateDate(createTime);companyMaterial.setMaterialType(materialTypeList.get(i));companyMaterial.setMaterialTypeName(materialTypeNameList.get(i));companyMaterial.setFileName(wordfileadd+uploadsFileName.get(i));companyMaterial.setFileUrl(fileFolder+wordfileadd+uploadsFileName.get(i));companyMaterialService.save(companyMaterial);}}    public List<String> getMaterialTypeName1() {return materialTypeName1;}public void setMaterialTypeName1(List<String> materialTypeName1) {this.materialTypeName1 = materialTypeName1;}public List<String> getMaterialType1() {return materialType1;}public void setMaterialType1(List<String> materialType1) {this.materialType1 = materialType1;}public List<File> getUploads() {return uploads;}public void setUploads(List<File> uploads) {this.uploads = uploads;}public List<String> getUploadsContentType() {return uploadsContentType;}public void setUploadsContentType(List<String> uploadsContentType) {this.uploadsContentType = uploadsContentType;}public List<String> getUploadsFileName() {return uploadsFileName;}public void setUploadsFileName(List<String> uploadsFileName) {this.uploadsFileName = uploadsFileName;}}

 

小結

 

我們在Strust2的表單中賦予file控制項的name屬性一樣，實現多張圖片進行提交，後台擷取file數組，完成圖片上傳的功能。由此拓展出來，只要前台控制項的name屬性一樣，我們就可以在後台擷取前台的name屬性一樣的控制項數組的值，知道這一點用起來確實會方便很多。