.pic-more {
width: 100%;
margin: 10px 0px 0px 0px;
}
.pic-more li {
width: 90px;
float: left;
margin-right: 20px;
}
.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;
width:18px;
height:18px;
background-color: red;
border-radius:5px;
color:white;
line-height: 18px;
text-align: center;
}
#slide-pc-priview li .toright {
position: absolute;
top: 40px;
right: 1px;
cursor: pointer;
width:18px;
height:18px;
background-color: red;
border-radius:5px;
color:white;
line-height: 18px;
text-align: center;
}
#slide-pc-priview li .close {
background-color: red;
width: 22px;
height: 22px;
border-radius: 50%;
position: absolute;
top: -10px;
right: -5px;
cursor: pointer;
font-size: 20px;
color:white;
line-height: 20px;
text-align: center;
}
<div class="layui-col-md10">
<div class="layui-col-md6">
<div class="layui-row" >
<div class="layui-input-block" style="margin-left: 0px;width: 70%;" >
<div class="layui-upload" >
<button type="button"
class="layui-btn layui-btn-primary pull-left"
id="slide-pc" >上传
</button>
<div class="pic-more">
<ul class="pic-more-upload-list"
id="slide-pc-priview">
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md6">
<img class="layui-upload-img" src="/static/image/id_example.png"
onerror="this.src='/static/image/nopic.jpg'" alt="证件示例">
</div>
<div class="layui-col-md6 layui-form-mid layui-word-aux">
支持jpg、jpeg、png、gif,每张照片最大不超过1mb。
</div>
</div>
```html
```javascript
<script>
function show_img(t) {
var t = $(t).find("img");
layer.open({
title:"图片详情",
type: 1,
skin: 'none',
area: ['50%', '65%'],
shadeClose: true,
end: function (index, layero) {
return false;
},
content: '<div style="text-align:center"><img src="' + $(t).attr('src') + '" /></div>'
});
}
layui.use('upload', function () {
var $ = layui.jquery;
var upload = layui.upload;
upload.render({
elem: '#slide-pc',
url: "{:url('com/Upload/upload_img')}",
size: 50000,
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(`<li class="item_img">
<div class="operate">
<i class="toleft layui-icon"></i>
<i class="toright layui-icon"></i>
<i class="layui-icon close" ></i>
</div>
<div οnclick="show_img(this)"><img src="${res.showPath}" class="img" ></div>
<input type="hidden" name="pc_src[]" value="${res.path}" />
</li>`);
}
});
});
$("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));
});
</script>
public function upload_img()
{
$file = request()->file('file');
if ($file == null) {
exit(json_encode(array('code' => 1, 'msg' => '未上传图片', 'data' => $_FILES)));
}
$temp = explode(".", $_FILES["file"]["name"]);
$extension = end($temp);
if (!in_array($extension, array("gif", "jpeg", "jpg", "png"))) {
exit(json_encode(['code' => 1, 'msg' => '上传图片不合法']));
}
$path = config('ImgPath');
$prefix = config('imgprefix');
$info = $file->move($path . $prefix);
$img = $info->getSaveName();
return json(['code' => 0, 'path' => $prefix . '/' . $img, "showPath" => tostatic($prefix . '/' . $img)]);
}