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

时间： 2024-10-26 12:49:34

Java SSH 项目总结——Struts2上传图片组的相关文章

Java SSH 项目总结——设定工作日日历

前言 今天文章的主题就是日历,先介绍下背景,这个日历是为一个在线预约系统服务的,在线预约就是选择工作日,然后进行具体业务的预约,而工作日的是设定就是通过我们这个日历来完成的. 正题 效果 我们先来看下日历的效果图,第一张是当前月的日历,第二张是设定完工作日的日历, 分解 我们要实现这个工作日设定的日历的功能,将这个功能进行分解: 1.实现一个万年历. 2.通过界面点击日历将工作日保存到数据库中 3.将数据库中已经设定好的日期渲染到界面日历中以不同的颜色进行标识. 实现 数据库设计 数据库中需要保

sina sae 部署 java ssh 项目

转自:http://jacobcookie.iteye.com/blog/1876798 1. 在sae上使用struts,需要添加的Listener,在com.company.listener中添加SaeListener.java. Java代码   package com.company.listener; import javax.servlet.ServletContextEvent; import javax.servlet.ServletContextListener; import

Java SSH 项目总结——JS实现图片悬浮

前言 先说下要实现什么功能,页面上有图片,当鼠标移动到图片上时,图片呈放大悬浮的效果.试验了几种方法,比如用鼠标事件控制div中图片的显示和隐藏,还有其它方法,最后采用了开源的JS来实现图片的悬浮效果. 效果 先看下效果图,当鼠标移动到图片上时,图片就会放大悬浮到页面中间,鼠标移走时,图片就会从悬浮的页面中间消失,页面上原有的样式也不会有任何改变. 实现 看完效果图,我们来看下实现过程: <span style="font-family:KaiTi_GB2312;">//引

Java SSH 项目总结——Ajax+Json 级联菜单

前言 前台JSP页面需要实现下拉菜单的级联效果,实现方式如题,采用Ajax+Json,分享下实现过程. 正题 先看下效果图: 前台 <tr> <td> 注册地址 <!-- registeredAddressSection --> </td> <td> <select class="combox" id="zhuceid" name="zhuceid" onchange="

SSH项目整合教学Eclipse搭建SSH（Struts2+Spring3+Hibernate3）

这篇博文的目的 尝试搭建一个完整的SSH框架项目. 给以后的自己,也给别人一个参考. 读博文前应该注意: 本文提纲:本文通过一个用户注册的实例讲解SSH的整合.创建Struts项目,整合Hibernate,整合Spring.最后总结如何熟练创建SSH项目. 仅是创建SSH项目,对于其他的扩展例如Struts的国际化,Hibernate的缓存优化,Spring的AOP等,本博文涉及不到.想学习更多的东西请搜索其他博文. 本项目的环境:Windows 8-64位,Eclipse Indigo Ser

MVC模式下基于SSH三大框架的java web项目excel表格的导出(不依赖另外的jar包)

最近工作中碰到了需要将web页面的表格内容导出到excel表格并下载到本地的需求.以下是在利用网上资源.与同事探讨下,完成的代码. 首先我们需要有定义好的实体类.以下是截取了项目中用到的部分代码. 1 public class QyggDocuments implements java.io.Serializable { 2 3 private static final long serialVersionUID = -2543382529255041149L; 4 5 private Stri

Java SSH (strusts2+spring+hibernate )完结项目源码 mysql

Java SSH (strusts2+spring+hibernate ) 完结项目源码 mysql 用来学习 毕业设计都可 继续二次开发也行 提供文档 数据结构 下载地址: 联系QQ 313596790

熟悉基于JSP和Servlet的Java Web开发，对Servlet和JSP的工作原理和生命周期有深入了解，熟练的使用JSTL和EL编写无脚本动态页面，有使用监听器、过滤器等Web组件以及MVC架构模式进行Java Web项目开发的经验。

熟悉基于JSP和Servlet的Java Web开发,对Servlet和JSP的工作原理和生命周期有深入了解,熟练的使用JSTL和EL编写无脚本动态页面,有使用监听器.过滤器等Web组件以及MVC架构模式进行Java Web项目开发的经验. 1.说一说Servlet生命周期(非常重要) Servlet生命周期包括三部分: 初始化:Web容器加载servlet,调用init()方法 只执行一次 处理请求:当请求到达时,运行其service()方法.service()自动调用与请求相对应的doXXX

Myeclipse插件快速生成ssh项目并配置注解 在action层注入service的超详细过程

最近发现,我对于ssh的 自动注入配置 还是不熟悉,于是整理了一下 终于做了一个 简单的 注入配置出来. 以前都是在applicationContext.xml 里面这样配 <bean id="loginAction" class="com.dj.ssh.action.LoginAction" scope="prototype" autowire="byName"> <property name="