在前端页面的form表单中写如下代码:
注:里面有一张add.png
的图片,可以找适当的图片替换
<div class="layui-form-item" style="margin-top: 15px;">
<label class="layui-form-label" style="margin-left: 20px;">轮播图:</label>
<div class="imgcon1" style="float: left;margin-left: 16px;"></div>
<input id="videoImage1" name="lunbo" type="hidden" value="">
<div class="addimg1" style="float: left;margin-left: 16px;">
<div class="" id="drag1" title="将文件拖拽到此处上传">
<label for="fileupload1" title="点击上传">
<img alt="" src style="height: 100px;width: 100px;" th:src="@{/xadmin/images/add.png}">
</label>
</div>
<input accept="image/*" data-url="/recycle/goods/uploadImg" id="fileupload1" multiple="multiple" name="imageFile"
style="display: none" type="file">
</div>
</div>
注意这句:
<input accept="image/*" data-url="/recycle/goods/uploadImg" id="fileupload1" multiple="multiple" name="imageFile"
style="display: none" type="file">
其中的data-url是一个访问地址,在下面的controller中会写到
在<script>
标签中写上如下代码:
<!--拖动图片交换位置-->
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
var srcdiv = null;
function drag(ev,divdom)
{
srcdiv=divdom;
ev.dataTransfer.setData("text/html",divdom.innerHTML);
}
function drop(ev,divdom)
{
ev.preventDefault();
if(srcdiv != divdom){
srcdiv.innerHTML = divdom.innerHTML;
divdom.innerHTML=ev.dataTransfer.getData("text/html");
}
}
</script>
<script>
//删除图片
function closeImg1(obj) {
$(obj).parent().remove();
// var goods_img = '';
// $('.imgcon .img_div').each(function () {
// goods_img += $(this).find('img').attr('src') + ',';
// })
$('#videoImage1').val('');
if ($('.imgcon1').children().length == 1) {
$('.addimg1').css('display', 'none');
}
if ($('.imgcon1').children().length < 1) {
$('.addimg1').css('display', 'inline-block');
}
}
//上传图片
$(function () {
$('#fileupload1').fileupload({
dataType: 'json',
dropZone: $('#drag1'),
change: function (e, data) {
var len = $('.imgcon1').children().length;
// if (data.files.length > (3 - parseInt(len))) {
// layer.msg('最多上传3张图片');
// return false;
// }
},
start: function (e) {
layer_msg = layer.msg('正在上传中…', {time: 100000000});
},
progressall: function (e, data) {
$('.layui-layer-msg .layui-layer-content').html('已上传' + (data.loaded / data.total * 100).toFixed(2) + '%');
},
done: function (e, data) {
layer.close(layer_msg);
callback(data.result.msg);
}
});
$('#drag1').bind('drop dragover', function (e) {
e.preventDefault();
}).on('dragenter', function (e) {
$(this).addClass('dragenter');
}).on('drop', function (e) {
$(this).removeClass('dragenter');
}).on('dragleave', function (e) {
$(this).removeClass('dragenter');
});
/**
* 数据回调
* @param id
* @param value
*/
function callback(value) {
var $li = $(
"<div class=\"img_div\" style=\"position: relative;float:left;margin-right: 10px;\" οndrοp="drop(event,this)" οndragοver="allowDrop(event)" draggable="true" οndragstart="drag(event, this)">" +
"<a οnclick=\"$(this).attr('href', $(this).find('img').attr('src'))\" type=\"button\" data-lightbox=\"preview\">" +
"<img src=\"" + value + "\" alt=\"\" style=\"width: 100px;\">" +
"<input class='videoImage1' type='hidden' value=\"" + value + "\" name='lunbotu'>" +
"</a>" +
"<i class='layui-icon layui-icon-delete close' οnclick='closeImg1(this)' " +
"style=\"position: absolute;top: -11px;right: -11px;color: red;font-weight: bolder;font-size: 22px;\"></i>" +
"</div>"
);
$('.imgcon1').append($li);
console.log($("#videoImage1"))
$("#videoImage1").val(value);
if ($('.imgcon1').children().length == 1) {
$('.addimg1').css('display', 'none');
}
// var goods_img = '';
// $('.imgcon .img_div').each(function () {
// goods_img += $(this).find('img').attr('src') + ',';
// })
$('.goods_img1').val($(this).find('img').attr('src'));
}
//图片回显
if ("$document.getElementsByName('name')" != '') {
var goods_img = $(document.getElementsByName('name'));
$('.goods_img1').val(goods_img);
// var arr = goods_img.split(',');
// for (var i = 0; i < arr.length; i++) {
// if (arr[i] != '') {
// callback(arr[i]);
// }
// }
if ($('.imgcon1').children().length == 1) {
$('.addimg1').css('display', 'none');
}
}
});
</script>
注意在前端页面中引如如下的js文件:
<script th:src="@{/xadmin/lib/jQuery-File-Upload/js/vendor/jquery.ui.widget.js}" src="static/xadmin/lib/jQuery-File-Upload/js/vendor/jquery.ui.widget.js"></script>
<script th:src="@{/xadmin/lib/jQuery-File-Upload/js/jquery.iframe-transport.js}" src="static/xadmin/lib/jQuery-File-Upload/js/jquery.iframe-transport.js"></script>
<script th:src="@{/xadmin/lib/jQuery-File-Upload/js/jquery.fileupload.js}" src="/xadmin/lib/jQuery-File-Upload/js/jquery.fileupload.js"></script>
这个就是上面提到的data-url的访问地址了:
@Controller
@RequestMapping("/recycle/goods")
public class GoodsController extends BaseController {
/**
* 添加页面图片保存跳转
*/
String path = "";
@PostMapping("uploadImg")
@ResponseBody
public AjaxResult addFile(@RequestParam("imageFile") MultipartFile imageFile) {
path = OssFileUtils.uploadSingleFile(imageFile);
return success(path);
}
/**
* 添加
* @param goods
* @return
*/
@PostMapping("add")
@ResponseBody
@NoRepeatSubmit
public AjaxResult add(String lunbotu){
boolean flag= goodsService.add(lunbotu);
return toAjax(flag);
}
}
上面写的add方法中,是在假设我的数据库中只有两个字段的情况下,一个是自增的id,另一个就是轮播图的阿里云地址。
add方法如下:
/**
* 多图片上传
*/
@Override
public boolean add(String lunbotu) {
//处理轮播图
if (StringUtils.isNoneBlank(lunbotu)) {
String[] imgs = lunbotu.split(",");
for (String s : imgs) {
goodsMapper.insertIntoLinks(s);
}
return true ;
}
return false ;
}
这样就可以把多张图片都存到数据库里了。