前天公司要求做一个表单，有3张图片需要存到服务器和数据库，3张图片对应3个字段，图片直接放在upload下面 不是图片服务器，图片不会重复。
如下表单：
前端代码： 没有用预览的功能，懒得弄 样式也没调，直接拿bootstrap的表单构造器弄出来的。
<h3>商铺入驻申请表</h3>
<form id="form" name="form" class="form-horizontal" action="/addStore" method="post" enctype="multipart/form-data">
<fieldset>
<div class="control-group">
<!-- Text input-->
<div class="controls">
<label class="control-label" >会员ID：</label> <input type="text" placeholder="" class="input-xlarge" name="appId" required="required">
<p class="help-block">对应个人中心的邀请码ID</p>
</div>
</div>
<div class="control-group">
<!-- Text input-->
<div class="controls">
<label class="control-label" >法定代表人姓名：</label> <input type="text" placeholder="" class="input-xlarge" name="name" required="required">
<p class="help-block">营业执照上的法定代表人姓名</p>
</div>
</div>
<div class="control-group">
<!-- Text input-->
<div class="controls">
<label class="control-label">手机号码：</label> <input type="text" placeholder="" class="input-xlarge" name="phone" required="required">
<p class="help-block">法定代表人手机号码</p>
</div>
</div>
<div class="control-group">
<!-- Text input-->
<div class="controls">
<label class="control-label">邮箱：</label> <input type="text" placeholder="" class="input-xlarge" name="email" required="required">
<p class="help-block">法定代表人邮箱</p>
</div>
</div>
<div class="control-group">
<!-- Text input-->
<div class="controls">
<label class="control-label" >身份证号码：</label> <input type="text" placeholder="" class="input-xlarge" name="idNumber" required="required">
<p class="help-block">法定代表人身份证号码</p>
</div>
</div>
<div class="control-group">
<!-- File Upload -->
<div class="controls">
<label class="control-label">身份证正面照片：</label> <input class="input-file" type="file" name="file" required="required" multiple="multiple">
</div>
</div>
<p></p>
<div class="control-group">
<!-- File Upload -->
<div class="controls">
<label class="control-label">身份证反面照片：</label> <input class="input-file" name="file1" type="file" required="required" multiple="multiple">
</div>
</div>
<p></p>
<div class="control-group">
<!-- Text input-->
<div class="controls">
<label class="control-label" >工商户名称：</label> <input type="text" placeholder="" class="input-xlarge" name="storeName" required="required">
<p class="help-block">营业执照名称</p>
</div>
</div>
<div class="control-group">
<!-- File Upload -->
<div class="controls">
<label class="control-label">营业执照副本：</label> <input class="input-file" name="file2" type="file" required="required" multiple="multiple">
</div>
</div>
<p></p>
<div class="control-group">
<!-- Text input-->
<div class="controls">
<label class="control-label" >营业执照所在地</label> <input type="text" name="storeAdd" class="input-xlarge" required="required">
<p class="help-block">营业执照所在地区</p>
</div>
</div>
<input type="checkBox" onclick="if (this.checked) {enable()} else {disable()}"> <a href="#">同意入驻协议</a>
<p></p>
<!-- Button -->
<div class="controls">
<input class="btn btn-success" id="accept" type="submit" disabled="true"/>
</div>
</fieldset>
</form>
提交方式为表单提交 input标签type="submit"，如果是ajax提交type="button"，
<input class="btn btn-success" id="accept" type="submit" disabled="true"/>
上传图片的type="file",multiple="multiple"，name对应后台字段，我这边有三个 分别是file file1 file2
图片按钮1：<label class="control-label">身份证正面照片：</label> <input class="input-file" type="file" name="file" required="required" multiple="multiple"> 图片按钮2：<label class="control-label">身份证反面照片：</label> <input class="input-file" name="file1" type="file" required="required" multiple="multiple"> 图片按钮3：<label class="control-label">营业执照副本：</label> <input class="input-file" name="file2" type="file" required="required" multiple="multiple">
还要注意form标签 enctype=nultipart/form-data
<form id="form" name="form" class="form-horizontal" action="/addStore" method="post" enctype="multipart/form-data">
对应后台接口，我用的是SSM框架，
controller层，一个对象，三个MultipartFile file0 file1 file2 分别对应前端的三个上传图片的name，由于是3个图片放在三个字段里面，所有需要3个MultipartFile。（如果是放在一个multipartFile对象的话不知道怎么弄。放在集合里面在遍历出来吗？）
使用UUID重命名，在获取文件扩展名，保存到服务器，在保存到数据库。把3个文件参数分别set到Store对象对应的字段里去。
还有就是我这个方法的返回值用的是String的如果成功就跳转到success页面，没用json的
//申请入驻表单
@RequestMapping("/addStore")
public String addStore(HttpServletRequest request, Store storeIn, MultipartFile file, MultipartFile file1, MultipartFile file2) throws IOException {
//使用UUID重命名图片 避免重复
String name = UUID.randomUUID().toString().replaceAll("-", "");
String name1 = UUID.randomUUID().toString().replaceAll("-", "");
String name2 = UUID.randomUUID().toString().replaceAll("-", "");
//获取文件扩展名
String ext = FilenameUtils.getExtension(file.getOriginalFilename());
String ext1 = FilenameUtils.getExtension(file1.getOriginalFilename());
String ext2 = FilenameUtils.getExtension(file2.getOriginalFilename());
//设置图片上传路径
String url = request.getSession().getServletContext().getRealPath("/upload");
//以绝对路径保存重命名后的图片
file.transferTo(new File(url + "/" + name + "." + ext));
file1.transferTo(new File(url + "/" + name1 + "." + ext1));
file2.transferTo(new File(url + "/" + name2 + "." + ext2));
//把图片路径存到数据库
storeIn.setIdImgFront("http://localhost:8080/" + "upload/" + name + "." + ext);
storeIn.setIdImgRever("http://localhost:8080/" + "upload/" + name1 + "." + ext1);
storeIn.setStoreImage("http://localhost:8080/" + "upload/" + name2+ "." + ext2);
//给状态码设置默认值
storeIn.setStatus(0);
storeService.addStore(storeIn);
return "/success";
}service层就是直接调用mybatis逆向生成的insert方法，判断一下是否为0就ok
@Resource
StoreMapper storeMapper;
@Override
public ServerResponse<String> addStore(Store store) {
int insert = storeMapper.insert(store);
if (insert == 0) {
return ServerResponse.createByErrorMessage("添加失败");
}
return ServerResponse.createBySuccessMessage("添加成功");
}
数据库字段
upload文件夹里面
取出来是这个样子的
