标签：struts2   图片   表单   ssh   java   

前言

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

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

标签：struts2   图片   表单   ssh   java   

原文地址：http://blog.csdn.net/zwk626542417/article/details/41452613