Java SSH 项目总结——Struts2上传图片组

前言

 

在一个表单中上传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属性一样的控件数组的值，知道这一点用起来确实会方便很多。