web表单多图片上传+本地预览
先看效果
1 选择本地文件，预览
2 提交上传
3后台保存
4给前台返回 文件路径
1 前端代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title>理财客户详情</title>
<link rel="stylesheet" href="components/bootstrap/css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="components/bootstrap/js/bootstrap.min.js"></script>
<script src="js/jquery-form.js"></script>
<script src="js/zmsTools.js"></script>
<script src="components/layer2/layer/layer.js"></script>
<script src="js/toast.js"></script>
<!-- 上传图片预览插件 -->
<script src="js/previewImage.js"></script>
</head>
<body>
<ol class="breadcrumb">
<li><span class="glyphicon glyphicon-home"></span><a href="manager/defaultPage.html"> 首页</a></li>
<li><a href="javascript:void(0)">理财客户</a></li>
<li class="active">身份证设置</li>
</ol>
<div class="row" style="margin:5px">
<div class="col-md-10 ">
<div class="panel panel-default">
<div class="panel-heading">理财客户身份证</div>
<div class="panel-body">
<c:choose>
<c:when test="${empty vip }">
不存在该客户
</c:when>
<c:otherwise>
<form class="form-horizontal" id="webForm" >
<input type="hidden" id="id" name="id" value="${vip.id}">
<div class=" container " style=" margin-bottom:5px">
<div class="row">
<div class=" col-sm-5 col-sm-offset-1">
<div class="col-sm-6">
<label for="picFront" class="control-label">${vip.name}的身份证正面:</label> <br>
<label class="btn btn-danger btn-upload " for="picFront" title="选择图片" style="width:100px">
<input type="file" class="sr-only" id="picFront" name="picFront" accept="image/*">
<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="选择图片">
<span class="fa fa-file-photo-o "></span> 选图片 </span>
</label>
</div>
<div class="col-sm-6" style="margin-left: 5px;">
<div>
<c:choose>
<c:when test="${ not empty vip.picfront }">
<img id="imgFront" width="480" height="360" src="/userFacePic/${vip.picfront}" style="border: 1px solid #B9B1B1; margin: 5px;" />
</c:when>
<c:otherwise>
<img id="imgFront" width="480" height="360" src="images/pic_null.png" style="border: 1px solid #B9B1B1; margin: 5px;" />
</c:otherwise>
</c:choose>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="col-sm-6">
<label for="picBack" class="control-label" >${vip.name}的身份证反面:</label> <br>
<label class="btn btn-danger btn-upload " for="picBack" title="选择图片" style="width:100px">
<input type="file" class="sr-only" id="picBack" name="picBack" accept="image/*">
<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="选择图片">
<span class="fa fa-file-photo-o "></span> 选图片 </span>
</label>
</div>
<div class="col-sm-6" style="margin-left: 5px;">
<div>
<c:choose>
<c:when test="${ not empty vip.picback }">
<img id="imgBack" width="480" height="360" src="/userFacePic/${vip.picback}" style="border: 1px solid #B9B1B1; margin: 5px;" />
</c:when>
<c:otherwise>
<img id="imgBack" width="480" height="360" src="images/pic_null.png" style="border: 1px solid #B9B1B1; margin: 5px;" />
</c:otherwise>
</c:choose>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-10">
<button type="submit" class="btn btn-primary col-sm-3" id="subBtn">提交</button>
</div>
</div>
</form>
</c:otherwise>
</c:choose>
</div>
</div>
</div>
</div>
</body>
<script>
$(function() {
$("#picFront").uploadPreview({
Img : "imgFront"
});
$("#picBack").uploadPreview({
Img : "imgBack"
});
});
</script>
<script>
$(function(){
var options = {
url: "manager/setIdPicAction.html" ,
type: "post" ,
beforeSubmit: showRequest, //提交前处理
success: showResponse, //处理完成
resetForm: false, //把表单清空 ，由于有图片预览，需要在 showResponse 里单独处理
dataType: "json",
};
$("#webForm").submit(function() {
$(this).ajaxSubmit(options);
// 阻止默认的提交事件
return false;
});
});
//提交前验证
function showRequest(formData, jqForm, options) {
/* if( $("#name").val()=="" ){
warn(" 用户名称还没有填！","name",10,0)
return false;
} */
return true;
}
//获取反馈信息
function showResponse(responseText, statusText) {
if (responseText.msg=="updateOK")
{
//使用自定义的弹窗， 可以控制相对于谁弹窗。 而 Layer弹窗默认是屏幕中间
layer.msg("更新成功!");
}
else{
layer.msg("更新失败!");
}
}
</script>
</html>
2 后台代码
/** * *@返回值:AjaxMsg *@时间: 2016年4月20日下午4:11:08 *@作者:张木生 [email protected] *@说明:设置身份证 *@参数:@param vip *@参数:@param picFront *@参数:@param picBack *@参数:@return *@参数:@throws Exception */ @RequestMapping("/setIdPicAction") @ResponseBody public AjaxMsg setIdPicAction(TVip vip,MultipartFile picFront,MultipartFile picBack) throws Exception { AjaxMsg msg=new AjaxMsg(); // 如果有图片就处理 //处理正面 if (picFront != null ) { if ( picFront.getOriginalFilename().length() > 4 ) { //根据绝对路径获取 磁盘位置 /* String pic_path = "D:\\tomcat-7.0.63\\webapps\\productPic\\";*/ // 获取图片后缀名 // 获取原始文件名称 String sourceFilename = picFront.getOriginalFilename(); // 取扩展名 String subFixName = sourceFilename.substring(sourceFilename.lastIndexOf(".")); // 新图片名称 String newFileName = UUID.randomUUID() + subFixName; // 创建新图片 File newPicFile = new File(Constants.USEPIC_PATH + newFileName); // 将接收到的图片 写入 硬盘 try { picFront.transferTo(newPicFile); vip.setPicfront(newFileName); vipService.updateVipAction(vip,msg); } catch (Exception e) { e.printStackTrace(); } } } //正面结束 if (picBack != null ) { if ( picBack.getOriginalFilename().length() > 4 ) { //根据绝对路径获取 磁盘位置 /* String pic_path = "D:\\tomcat-7.0.63\\webapps\\productPic\\";*/ // 获取图片后缀名 // 获取原始文件名称 String sourceFilename = picBack.getOriginalFilename(); // 取扩展名 String subFixName = sourceFilename.substring(sourceFilename.lastIndexOf(".")); // 新图片名称 String newFileName = UUID.randomUUID() + subFixName; // 创建新图片 File newPicFile = new File(Constants.USEPIC_PATH + newFileName); // 将接收到的图片 写入 硬盘 try { picBack.transferTo(newPicFile); vip.setPicback(newFileName); vipService.updateVipAction(vip,msg); } catch (Exception e) { e.printStackTrace(); } } } //图片处理结束 return msg; }