SSM框架下实现多图片上传

最近在实现一个身份证件多图片上传的功能，那么我们如何基于SSM框架来实现身份证件多图片上传的功能的？下面我们来实现一下。

Controller层：

@RequestMapping("identityAuthentication.do")
public void identityAuthentication(HttpServletRequest req, HttpServletResponse resp,Tbcustomer tbcustomer,
			@RequestParam(value = "picture", required = true) MultipartFile[] myFile)
			throws ServletException, IOException {  
		resp.setContentType("text/json");
		try {
			int CustomerID = Integer.parseInt(req.getSession()
					.getAttribute("customerID").toString());
			SimpleDateFormat SDF=new SimpleDateFormat("yyyy-MM-dd HH:mm::ss");//时间格式
			
			String uploadPath = req.getServletContext().getRealPath("/")
					+ "\\Temp";
			int Record = 0;
			List<String> imageName = new ArrayList<String>();
			
			tbcustomer.setCustomerid(CustomerID);
			//日志新增
			Tblog tblog=new Tblog();
			tblog.setCustomerid(CustomerID);
			tblog.setOperationbehavior("个人中心（身份认证）");
			try {
				tblog.setOperationdate(SDF.parse(SDF.format(System.currentTimeMillis())));//日期
			} catch (ParseException e1) {
				e1.printStackTrace();
			}
		   
			if (myFile.length >= 2) {
				try {
					if (myFile != null && myFile.length > 0) {
							String uploadFileName = "";
							for (MultipartFile multipartFile : myFile) {
								uploadFileName = ReadFileUtil
										.readWriteFile(multipartFile.getInputStream(),
												multipartFile.getOriginalFilename(),
												uploadPath);
							imageName.add(uploadFileName);
						}
						if (imageName.size() >= 2) {
							tbcustomer.setFrontofdocument(imageName.get(0));
							tbcustomer.setBackofdocument(imageName.get(1));
						}
					} 
				} catch (Exception e) {
					e.printStackTrace();
				}
			} else{
				resp.getWriter().write("{\"str\":\"请选择您所需要上传的证件图片\"}");
			}
			if (Record > 0) {
				if (imageName.size() > 0) {
					for (int i = 0; i < imageName.size(); i++) {
						File oldFile = new File(uploadPath + "\\"
								+ imageName.get(i));
						if (oldFile.exists() && oldFile.isFile()) {
							oldFile.delete();
						}
					}
				}
			}
			
			int insert = iFrontLoginServer.insertIdentityAuthentication(tbcustomer);
			int logInsert=iItemManagermentService.logAdded(tblog);
			
			if (insert > 0) {
				if(logInsert>0){
					resp.getWriter().write("{\"str\":\"上传成功\"}");
				}
			} else {
				resp.getWriter().write("{\"str\":\"上传失败\"}");
			}
		} catch (Exception e) {
			e.printStackTrace();
			resp.getWriter().write("{\"str\":\"请刷新页面后重试\"}");
		}

Html页面：

<table class="my_info_content_care_table">
    <tbody>
    <form class="form-horizontal" id="form_UserType" action="${ctx}/FrontLogin/identityAuthentication.do" method="post" enctype="multipart/form-data">
      <tr>
        <td width="300" align="right" class="color555">上传身份证正面照：</td>
        <td class="color555"><input class="my_info_content_care_table_file" name="picture" id="FrontOfDocument" onclick="show()" type="file"></td>
      </tr>
      <tr>
        <td align="right" class="color555">&nbsp;</td>
        <td class="color555"><img id="imgcheck" width="215" height="110" src="${ctx}/assets/img/default_idcard.jpg"></td>
      </tr>
      <tr>
        <td align="right" class="color555">上传身份证背面照：</td>
        <td class="color555"><input class="my_info_content_care_table_file" name="picture" id="BackOfDocument" onclick="ShowNegativeCertificate()" type="file"></td>
      </tr>
      <tr>
        <td align="right" class="color555">&nbsp;</td>
        <td class="color555"><img id="imgcheck2" width="215" height="110" src="${ctx}/assets/img/default_idcard.jpg"></td>
      </tr>
      <tr>
        <td align="right" class="color555">&nbsp;</td>
        <td class="color555"><span class="color959595 margin_left10 font_size12">温馨提示：请上传JPG/GIF/PNG格式图片，文件大小请控制在1M以内！</span></td>
      </tr>
      </form>
      <tr>
        <td align="center" class="color555" colspan="2"><button style="cursor: pointer;" class="my_info_content_care_table_submit" onclick="Add_Add()" name="">申请认证</button></td>
      </tr>
    </tbody>
  </table>
  <script src="${ctx}/assets/jquery/jquery-1.12.4.min.js" type="text/javascript"></script>
<!-- layer弹窗 -->
<script type="text/javascript" src="${ctx}/assets/plugins/layer/layer.js"></script>
<script type="text/javascript" src="${ctx}/assets/jquery/jquery.form.js"></script>

JS方法绑定：

//选择身份证正面照片
 function show() {
		var imgReaderI = new FileReader();  //FileReader()接口：用于读取文件
		 //图片文件 正则表达式过滤
		 regexImageFilter = /^(?:image\/bmp|image\/png|image\/jpeg|image\/jpg|image\/gif)$/i;
		 //回调函数onLoad异步
		 imgReaderI.onload = function (evt) {
		     $("#imgcheck").attr('src', evt.target.result);//将数据结果赋值给image的src
		 };
		 $("#FrontOfDocument").change(function () {
		     var imgfFile = $("#FrontOfDocument").prop('files')[0];//prop添加属性名称
		     //加载image标签中
		     if (!regexImageFilter.test(imgfFile.type)) {
		         layer.msg('选择的不是一个有效的图片文件', { icon: 0 });
		     }
		     //readAsDataURL()方法可以获取API异步读取的文件数据，另存为数据URL;将该URL绑定到img标签的src属性上，就可以实现图片的上传预览效果了。
		     imgReaderI.readAsDataURL(imgfFile);
		 });
		}; 
		//选择身份证反面照片
		function ShowNegativeCertificate() {
		var imgReaderI = new FileReader();  //FileReader()接口：用于读取文件
		 //图片文件 正则表达式过滤
		 regexImageFilter = /^(?:image\/bmp|image\/png|image\/jpeg|image\/jpg|image\/gif)$/i;
		 //回调函数onLoad异步
		 imgReaderI.onload = function (evt) {
		     $("#imgcheck2").attr('src', evt.target.result);//将数据结果赋值给image的src
		 };
		 $("#BackOfDocument").change(function () {
		     var imgfFile = $("#BackOfDocument").prop('files')[0];//prop添加属性名称
		     //加载image标签中
		     if (!regexImageFilter.test(imgfFile.type)) {
		         layer.msg('选择的不是一个有效的图片文件', { icon: 0 });
		     }
		     //readAsDataURL()方法可以获取API异步读取的文件数据，另存为数据URL;将该URL绑定到img标签的src属性上，就可以实现图片的上传预览效果了。
		     imgReaderI.readAsDataURL(imgfFile);
		 });
	};
//图片保存
//证件认证新增保存
function Add_Add() {
	     layer.confirm('是否保存？', { btn: ['确定', '取消'] }, function (M) {
	         layer.close(M);
	         M = layer.load();
	         $("#form_UserType").ajaxSubmit(function(info){
	          info=info.str;
	             layer.msg(info);
	             if (info.indexOf('成功') > -1) {
	        layer.alert("保存成功");
	                 var t1=window.setTimeout(Refresh, 2000);
	             }
	             layer.close(M);
	         });
	     });
	 }

效果截图：

这样你就可以实现基于SSM框架的多图片上传功能了。