php获取layui多文件,6、thinkphp+layui多图上传（1）

### thinkphp5&＃43;layui实现多图上传保存到数据库&＃xff0c;可以实现图片自由排序&＃xff0c;自由删除。



### 公共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(&＃39;upload&＃39;, function(){

var $ &＃61; layui.jquery;

var upload &＃61; layui.upload;

upload.render({

elem: &＃39;#slide-pc&＃39;,

url: &＃39;{:url(&＃39;admin/common/upload&＃39;)}&＃39;,

size: 500,

exts: &＃39;jpg|png|jpeg&＃39;,

multiple: true,

before: function(obj) {

layer.msg(&＃39;图片上传中...&＃39;, {

icon: 16,

shade: 0.01,

time: 0

})

},

done: function(res) {

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

if(res.status &＃61;&＃61; 0) {

return layer.msg(res.message);

}

//$(&＃39;#slide-pc-priview&＃39;).append(&＃39;&＃39;);

$(&＃39;#slide-pc-priview&＃39;).append(&＃39;

}

});

});

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

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

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

});

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

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

var li_index&＃61;$(this).closest("li").index();

if(li_index>&＃61;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&＃61;$(this).closest("li").index();

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

});

~~~

## 提示

详细控制器代码这些请参考九

https://www.kancloud.cn/jiang/thinkphp5/703015