ssm项目中form表单上传多张图片外加其他数据案例

ssm项目中form表单上传多张图片外加其他数据案例

---

弄一个form表单，里面有多个不同类型的input标签

<form class="upload" enctype="multipart/form-data">													
		<input type="file" name="upload" class="imgup1"  hidden="hidden" />				
		<input type="file" name="upload" class="imgup2"  hidden="hidden" />
		<input name="cordName" type="text" id="cardName"  placeholder="这里输入您的真实姓名">
		<input name="cordNum"  type="text" id="cardNum"  placeholder="这里输入身份证号码">
		<input type="hidden" name="userId" id="userId">
		<input type="submit" value="确认提交" class="btn_sub">
<form>

js这样写

<script type="text/javascript">

	$('.upload').submit(function(){
	var formData = new FormData($(".upload")[0]);  //表单里的数据放在 formData 里面
				$.ajax({
    				url:'...', 			    	//数据请求路径
    				type:'post',			    //这里用post方式=
    				data:formData,		 	    //传输的数据
    				async: true,		 	    //同步：true,异步：false;这里同步异步都可以，看自己的需求
         			processData: false,		    //这个一定要是false,
         			contentType: false,			//这个也要是false,
    				dataType:'json',			//返回的数据格式
    				success:function(retData){
    						//这里成功后返回数据 ：retData
    					}
				
					})
				})			
			return false;						//这个防止表单提交后刷新页面
	 })
</script>

Action中

	private File[] upload;					//这里	“upload” 一定要要和 input 标签 type='file' 的标签的 name 属性值要一致
	private String[] uploadFileName;		//这里命名规则一定是要符合 xxx+FileName ,这里xxx表示的 File[] 命名的名字
	private String cordName;				//这里也是要相应的input 中的 name 一致，这里说一哈，如果要使用我这种方式提交数据，
	private String cordNum;					  这除了文件类型的参数，其他通过表单获取的参数要设置成“String”类型的参数，
	private int userId;						  不然可能会报错。
	
	private IUserSecurityTableService securityService;

	
	public String addData() throws Exception{
 
		String path=ServletActionContext.getServletContext().getRealPath("/photo/");	//获取上传的路径
		
		File file=new File(path);
		//判断是否存在文件夹
		if(!file.exists()&&!file.isDirectory()){
			//不存在，创建文件夹
			file.mkdirs();
		}	
		
		String[] imgName=new String[2];				//这里我定一个一个 String 类型的数组，是为了后面存放上传图片修改后的名字
		//判断一下是否上传了文件，即upload是否为空,不为空，才进行上传的操作。
		if(upload!=null){
			for (int i = 0; i < upload.length; i++) {
				//定义输出流程，指定文件的写入路径
				String fielName=UUID.randomUUID().toString()+this.getUploadFileName()[i];
				imgName[i]=fielName;		      //把修改后的名字保存在imgName数组中
				FileOutputStream fos=new FileOutputStream(file+"/"+fielName);	
				FileInputStream  fin=new FileInputStream(this.getUpload()[i]);			
				//读、写				
				byte[] bt=new byte[1024];
				int len=0;
				while((len=fin.read(bt))>0){	
					fos.write(bt, 0, len);
				}
				//关闭流
				fin.close();
				fos.close();
			}			
		}

		String pat="http://"+InetAddress.getLocalHost().getHostAddress()+":8080/ZzRenting/photo/";		
				   //图片上传的路径地址，这里是加了当前服务器的ip地址
	
		//下面是把所有的数据保存在cardMap集合中
		Map<String,Object> cardMap=new HashMap<String, Object>();
						   cardMap.put("user_realName", cordName);
						   cardMap.put("user_cid", cordNum);
						   cardMap.put("user_id", userId);
						   cardMap.put("user_photo_pos", pat+imgName[0]);			//图片1网络路径
						   cardMap.put("user_photo_pos_local", path+imgName[0]);	//图片1本地路径
						   cardMap.put("user_photo_op",pat+imgName[1]);			    //图片2网络路径
						   cardMap.put("user_photo_op_local",path+imgName[1]);	    //图片2本地路径	
						 					
		int num=securityService.addTest(cardMap);							//这里调用方法把数据保存到数据库中	
		//判断是否操作成功或者说增加数据成功
		if(num!=0){	
			userId=-1;
		}
		return "success";		
	}

mapper中的对应的 xx.xml

<!-- 增加数据 -->
	<insert id="addTest" parameterType="map">
		insert into  userTable 
		(user_realName,user_cid,user_id,user_photo_pos,user_photo_pos_local,is_delete,user_photo_op,user_photo_op_local)
		VALUES
		(#{user_realName},#{user_cid},#{user_id},#{user_photo_pos},
		#{user_photo_pos_local},0,#{user_photo_op},#{user_photo_op_local})
	</insert>