php表单带多图上传,thinkphp+layui多图上传（1）thinkphp5+layui实现多图上传保存到数据库，可以实现图片自由排序，自由删除。...

公共css代码

.layui-upload-img { width: 90px; height: 90px; margin: 0; }

.pic-more { width:100%; left; margin: 10px 0px 0px 0px;}

.pic-more li { width:90px; float: left; margin-right: 5px;}

.pic-more li .layui-input { display: initial; }

.pic-more li a { position: absolute; top: 0; display: block; }

.pic-more li a i { font-size: 24px; background-color: #008800; }

#slide-pc-priview .item_img img{ width: 90px; height: 90px;}

#slide-pc-priview li{position: relative;}

#slide-pc-priview li .operate{ color: #000; display: none;}

#slide-pc-priview li .toleft{ position: absolute;top: 40px; left: 1px; cursor:pointer;}

#slide-pc-priview li .toright{ position: absolute;top: 40px; right: 1px;cursor:pointer;}

#slide-pc-priview li .close{position: absolute;top: 5px; right: 5px;cursor:pointer;}

#slide-pc-priview li:hover .operate{ display: block;}

多图上传页面html代码

相册图集

选择多图

公共JS代码

layui.use('upload', function(){

var $ = layui.jquery;

var upload = layui.upload;

upload.render({

elem: '#slide-pc',

url: '{:url('admin/common/upload')}',

size: 500,

exts: 'jpg|png|jpeg',

multiple: true,

before: function(obj) {

layer.msg('图片上传中...', {

icon: 16,

shade: 0.01,

time: 0

})

},

done: function(res) {

layer.close(layer.msg());//关闭上传提示窗口

if(res.status == 0) {

return layer.msg(res.message);

}

//$('#slide-pc-priview').append('');

$('#slide-pc-priview').append('

《 》

');

}

});

});

//点击多图上传的X,删除当前的图片

$("body").on("click",".close",function(){

$(this).closest("li").remove();

});

//多图上传点击<>左右移动图片

$("body").on("click",".pic-more ul li .toleft",function(){

var li_index=$(this).closest("li").index();

if(li_index>=1){

$(this).closest("li").insertBefore($(this).closest("ul").find("li").eq(Number(li_index)-1));

}

});

$("body").on("click",".pic-more ul li .toright",function(){

var li_index=$(this).closest("li").index();

$(this).closest("li").insertAfter($(this).closest("ul").find("li").eq(Number(li_index)+1));

});