因为涉及到业务部分，前端html代码需要支持上传图片，同时获取上传图片后组装成json地址，将地址存储到mysql中，其中数据库存储的图片地址采用json格式：
最终实现的效果如:
[{"path": "http://192.168.2.150:8089/wisdom/81ecdaf8-e1d9-4f33-b7ee-39888a2d860f.png"}, {"path": "http://192.168.2.150:8089/wisdom/a0f15d75-922d-42ba-affa-f9603c6fdd00.png"}]下面功能可以实现一个页面多个属性上传多个图片，记录各自值，最终返回给Controller进行业务处理
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
<div class="row">
<div class="col-sm-12">
<div class="ibox float-e-margins">
<div class="ibox-content">
<form class="form-horizontal m-t" id="signupForm">
<!--<div class="form-group"> -->
<!--<label class="col-sm-3 control-label">保单人id：</label>-->
<!--<div class="col-sm-8">-->
<!--<input id="userId" name="userId" class="form-control" type="text">-->
<!--</div>-->
<!--</div>-->
<div class="form-group">
<label class="col-sm-3 control-label">所属作业公司：</label>
<div class="col-sm-8">
<input id="companyId" name="companyId" class="form-control" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">行驶证编号：</label>
<div class="col-sm-8">
<input id="drivingLicense" name="drivingLicense" class="form-control" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">行驶证图片：</label>
<div class="col-sm-8">
<input type="hidden" id="objName" name="objName" value="">
<input type="hidden" id="objId" name="objId" value="-1">
<input type="hidden" id="drivingLicensePictureStr" name="drivingLicensePictureStr" value="">
<div class="form-group">
<div id="uploader-demo">
<!--用来存放item-->
<div id="thelist" class="uploader-list"></div>
<div class="col-sm-8">
<div id="filePicker">选择图片</div>
<button id="ctlBtn" style="display: none"
class="btn btn-default">开始上传</button>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">购置编号：</label>
<div class="col-sm-8">
<input id="purchase" name="purchase" class="form-control" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">登记证书：</label>
<div class="col-sm-8">
<input type="hidden" id="objNamecert" name="objName" value="">
<input type="hidden" id="objIdcert" name="objId" value="-1">
<input type="hidden" id="certificationPictureStr" name="certificationPictureStr" value="">
<div class="form-group">
<div id="uploader-demo-cert">
<!--用来存放item-->
<div id="thelistcert" class="uploader-list"></div>
<div class="col-sm-8">
<div id="filePickercert">选择图片</div>
<button id="ctlBtncert" style="display: none"
class="btn btn-default">开始上传</button>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">维保：</label>
<div class="col-sm-8">
<input id="maintenance" name="maintenance" class="form-control" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">使用范围：</label>
<div class="col-sm-8">
<input id="useRange" name="useRange" class="form-control" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">保险单号：</label>
<div class="col-sm-8">
<input id="insurance" name="insurance" class="form-control" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">保险单图片：</label>
<div class="col-sm-8">
<input type="hidden" id="objNameinsurance" name="objName" value="">
<input type="hidden" id="objIdinsurance" name="objId" value="-1">
<input type="hidden" id="insurancePictureStr" name="insurancePictureStr" value="">
<div class="form-group">
<div id="uploader-demo-insurance">
<!--用来存放item-->
<div id="thelistinsurance" class="uploader-list"></div>
<div class="col-sm-8">
<div id="filePickerinsurance">选择图片</div>
<button id="ctlBtninsurance" style="display: none"
class="btn btn-default">开始上传</button>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">车辆相片：</label>
<div class="col-sm-8">
<input type="hidden" id="objNamevehicle" name="objName" value="">
<input type="hidden" id="objIdvehicle" name="objId" value="-1">
<input type="hidden" id="vehiclePictureStr" name="vehiclePictureStr" value="">
<div class="form-group">
<div id="uploader-demo-vehicle">
<!--用来存放item-->
<div id="thelistvehicle" class="uploader-list"></div>
<div class="col-sm-8">
<div id="filePickervehicle">选择图片</div>
<button id="ctlBtnvehicle" style="display: none"
class="btn btn-default">开始上传</button>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-8 col-sm-offset-3">
<button type="submit" class="btn btn-primary">提交</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div th:include="include::footer"></div>
<script type="text/javascript" src="/js/layui/layui.js"></script>
<script type="text/javascript" src="/js/appjs/exsun/insuranceManagement/add.js">
</script>
<script>
function Picloader(option){
if(!option){
console.log('the function:Picloader require a parameter')
}else{
var $list = option.fileList? $(option.fileList) : $('#thelist');
var $btn = option.btn ? $(option.btn) : $("#ctlBtn");
var thumbnailWidth = option.thumbnailWidth ? option.thumbnailWidth : 100;
var thumbnailHeight = option.thumbnailHeight ? option.thumbnailHeight : 100;
var httpPathList = "[";
var uploader = WebUploader.create({
// 选完文件后，是否自动上传。
auto: true,
swf:'/js/plugins/webupload/Uploader.swf',
server:'/exsun/insuranceManagement/upload',
pick: option.pick ? option.pick : '#filePicker',
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/jpg,image/jpeg,image/png'
},
thumb: {
type: 'image/jpg,jpeg,png'
},
method:'POST',
fileNumLimit: 5, //限制上传个数
fileSingleSizeLimit: 2048000 //限制单个上传图片的大小
})
uploader.on( 'fileQueued', function( file ) {
var $li = $(
'<div id="' + file.id + '" class="file-item thumbnail">' +
'<img>' +
'<div class="info">' + file.name + '</div>' +
'</div>'
),
$img = $li.find('img');
// $list为容器jQuery实例
$list.append( $li );
uploader.makeThumb( file, function( error, src ) { //webuploader方法
if ( error ) {
$img.replaceWith('<span>不能预览</span>');
return;
}
$img.attr( 'src', src );
}, thumbnailWidth, thumbnailHeight );
});
// 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage ) {
var $li = $( '#'+file.id ),
$percent = $li.find('.progress span');
// 避免重复创建
if ( !$percent.length ) {
$percent = $('<p class="progress"><span></span></p>')
.appendTo( $li )
.find('span');
}
$percent.css( 'width', percentage * 100 + '%' );
});
// 文件上传成功，给item添加成功class, 用样式标记上传成功。
uploader.on( 'uploadSuccess', function(file,res) {
//debugger;
httpPathList = httpPathList + "{\"path\": " + res.data + " },";
//还有最后一个尾巴放到java后台处理，这里不知道具体上传了多少个图片
console.log(httpPathList);
$(option.srcContainer ? option.srcContainer : "#drivingLicensePictureStr").val(httpPathList)
$( '#'+file.id ).addClass('upload-state-done');
});
// 文件上传失败，显示上传出错。
uploader.on( 'uploadError', function( file ) {
var $li = $( '#'+file.id ),
$error = $li.find('div.error');
// 避免重复创建
if ( !$error.length ) {
$error = $('<div class="error"></div>').appendTo( $li );
}
$error.text('上传失败');
});
// 完成上传完了，成功或者失败，先删除进度条。
uploader.on( 'uploadComplete', function( file ) {
$( '#'+file.id ).find('.progress').remove();
});
return uploader;
}
}
$(function(){
var drivingLicensePicloader = Picloader({
fileList:'#thelist',
btn:'#ctlBtn',
pick:'#filePicker',
srcContainer:'#drivingLicensePictureStr'
});
var certificationPicloader = Picloader({
fileList:'#thelistcert',
btn:'#ctlBtncert',
pick:'#filePickercert',
srcContainer:'#certificationPictureStr'
});
var insurancePicloader = Picloader({
fileList:'#thelistinsurance',
btn:'#ctlBtninsurance',
pick:'#filePickerinsurance',
srcContainer:'#insurancePictureStr'
});
var vehiclePicloader = Picloader({
fileList:'#thelistvehicle',
btn:'#ctlBtnvehicle',
pick:'#filePickervehicle',
srcContainer:'#vehiclePictureStr'
});
});
</script>
</body>
</html>