提交表单和图片是web中经常要用到的。我这里用easyui做了一个表单，里面可以上传多张图片，并且可以进行新增和删除。
前端代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/easyui-1.5.1/jquery.min.js"></script>
<script src="js/easyui-1.5.1/jquery.easyui.min.js"></script>
<script src="js/easyui-1.5.1/locale/easyui-lang-zh_CN.js"></script>
<link href="js/easyui-1.5.1/themes/default/easyui.css" rel="stylesheet" />
<link href="js/easyui-1.5.1/themes/icon.css" rel="stylesheet" />
<link rel="stylesheet" href="iconfont/iconfont.css">
<style>
*{
margin: 0px;
padding: 0px;
}
li{
list-style: none;
}
.job_title{
position:relative;
width: 600px;
text-align: center;
margin: 20px auto;
margin-bottom: 0px;
}
.job_title a{
position: absolute;
right: 0px;
}
#jobForm{
width: 600px;
height: 620px;
border: 1px solid black;
margin: 10px auto;
}
.personInfoWithPhoto{
width: 100%;
height: 200px;
}
.personInfoWithPhoto .personInfo_top{
width: 448px;
float: left;
}
.personInfoWithPhoto .photo{
position: relative;
float: right;
width: 150px;
height: 200px;
border-bottom: 1px solid black;
}
.personInfo_top .row{
width: 100%;
height: 50px;
border-bottom: 1px solid black;
}
.personInfo_top .cell{
float: left;
width: 50%;
height: 50px;
line-height: 50px;
border-right: 1px solid black;
}
.personInfo_top .cell label{
margin: 0px 10px;
}
.personInfoWithoutPhoto{
height: 100px;
}
.personInfoWithoutPhoto .row{
width: 100%;
height: 50px;
border-bottom: 1px solid black;
}
.personInfoWithoutPhoto .cell{
float: left;
width: 50%;
height: 50px;
line-height: 50px;
}
.personInfoWithoutPhoto .row .cell:first-child{
border-right: 1px solid black;
}
.personInfoWithoutPhoto .cell label{
margin: 0px 10px;
}
.profile{
height: 130px;
border-bottom: 1px solid black;
}
.profile textarea{
padding-top: 5px;
text-indent: 2em;
width: 100%;
height: 100%;
resize: none;
border: 0px;
outline: none;
}
.certificates{
height: 190px;
padding: 10px 30px;
}
.certificates div{
position: relative;
margin-right: 29px;
display: inline-block;
border: 1px dashed black;
height: 80px;
width: 80px;
text-align: center;
}
.certificates div:first-child{
margin-bottom:10px;
}
.certificates div:nth-child(5n){
margin-right: 0px;
}
.photo .icon-guanbi{
position: absolute;
top: 5px;
right: 5px;
display: none;
}
.photo span{
position: absolute;
display: inline-block;
width: 30px;
height: 90px;
text-align: center;
top: 100px;
left: 75px;
margin-top: -45px;
margin-left: -15px;
border: 1px dashed black;
}
.photo img{
width: 150px;
height: 200px;
}
.certificates{
position: relative;
}
.certificates div .icon-guanbi{
position: absolute;
top: 5px;
right: 5px;
display: none;
}
.certificates div img{
display: none;
width: 78px;
height: 78px;
vertical-align: top;
}
.submit_btn{
width: 120px;
height: 30px;
background: orange;
border-radius: 20px;
margin: 0px auto;
color: #fff;
text-align: center;
line-height: 30px;
}
</style>
</head>
<body>
<div class="job_title">
<span>申请表</span>
</div>
<form id="jobForm">
<div class="personInfoWithPhoto">
<div class="personInfo_top">
<div class="row">
<div class="cell">
<label>姓 名</label>
<input class="easyui-textbox" name="name" style="height: 30px;width:120px;" data-options="required:true,validType:'checkBlank'"/>
</div>
<div class="cell">
<label>性 别</label>
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" style="margin-left: 5px;"/>女
</div>
</div>
<div class="row">
<div class="cell">
<label>民 族</label>
<input class="easyui-combobox" type="text" name="native"
data-options="valueField:'id', textField:'text', required: true, editable:false, panelHeight:'200',
data:DataSource.queryDict('native')" value="0" style="height: 30px;width: 120px;"
/>
</div>
<div class="cell">
<label>出生年月</label>
<input class="easyui-datebox" type="text" name="birthday" data-options="editable:false" style="height:30px;width: 120px;"/>
</div>
</div>
<div class="row">
<div class="cell">
<label>政治面貌</label>
<input class="easyui-combobox" type="text" name="zzmm"
data-options="valueField:'id', textField:'text', required: true, editable:false, panelHeight:'200',
data:DataSource.queryDict('zzmm')" value="0" style="height: 30px;width:120px;"
/>
</div>
<div class="cell">
<label>籍 贯</label>
<input class="easyui-combotree" type="text" name="jg"
data-options="valueField:'id', textField:'text', required: true, editable:false, panelHeight:'200',
data:DataSource.queryDict('jg')" value="11" style="height: 30px;width:120px;"
/>
</div>
</div>
<div class="row">
<div class="cell">
<label>专 业</label>
<input class="easyui-textbox" name="major" style="height: 30px;width:120px;" data-options="required:true,validType:'checkBlank'"/>
</div>
<div class="cell">
<label>毕业院校</label>
<input class="easyui-textbox" name="school" style="height: 30px;width:120px;" data-options="required:true,validType:'checkBlank'"/>
</div>
</div>
</div>
<div id="photo" class="photo" οnclick="photoMgr.uploadPhoto()">
<i class="iconfont icon-guanbi" οnclick="photoMgr.delPhoto()"></i>
<span id="upload">上传照片</span>
<img id="person_img"/>
</div>
</div>
<div class="personInfoWithoutPhoto">
<div class="row">
<div class="cell">
<label>身份证号</label>
<input class="easyui-textbox" name="idcard" style="height: 30px;width:200px" data-options="required:true,validType:'idcard'"/>
</div>
<div class="cell">
<label>手机号码</label>
<input class="easyui-textbox" name="tel" style="height: 30px;width:200px" data-options="required:true,validType:'mobile'"/>
</div>
</div>
<div class="row">
<div class="cell">
<label>邮箱地址</label>
<input class="easyui-textbox" name="email" style="height: 30px;width:200px" data-options="required:true,validType:'email'"/>
</div>
<div class="cell">
<label>家庭地址</label>
<input class="easyui-textbox" name="address" style="height: 30px;width:200px" data-options="required:true,validType:'checkBlank'"/>
</div>
</div>
</div>
<div class="profile">
<textarea id="" name="profile" placeholder="请输入社会实践经验"></textarea>
</div>
<div class="certificates" id="cert_list">
<div οnclick="certiMgr.uploadPhoto(this)">
<img src="tree/image/add.png" style="display: inline-block;"/>
<img />
<i class="iconfont icon-guanbi" οnclick="certiMgr.delPhoto(this)"></i>
</div>
</div>
</form>
<div id="submitBtn" class="submit_btn">提交申请</div>
<div id="file_ul">
<input type="file" name="file_0" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" style="display:none" οnchange="photoMgr.browseFile(this)"/>
</div>
</body>
<script src="js/data.js"></script>
<script src="js/form.js"></script>
<script src="js/validate.js"></script>
</html>
后端 代码：
@ResponseBody
@RequestMapping("/saveJobInfo.do")
public Response saveJobInfo(@RequestParam(required=false,value="file") CommonsMultipartFile[] files, HttpServletRequest request,HttpServletResponse resp) {
try {
resp.setHeader("Access-Control-Allow-Origin", "*");
System.out.println("11");
Map<String, Object> params = getParams(request);
Response status=new Response(false,"保存成功");
if(files!=null && files.length>0){
for(int i=0;i<files.length;i++){
if(files[i] != null && files[i].getSize() > 0){
byte[] photo = files[i].getBytes();
params.put("file_"+i, photo);
}
}
}
jobService.insertJob(params);
return new Response(true, "保存成功");
} catch (Exception e) {
e.printStackTrace();
return new Response(false, "保存失败");
}
}
数据库存储：
![[RUST/腐蚀]Windows-开服服务端下载以及配置](https://static.hdslb.com/images/favicon.ico)
