<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="__STATIC__/layui/css/layui.css" media="all">
<style>
.layui-upload-img { width: 150px; height: 150px; 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 .operate{ display: block;}
</style>
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>上传多张图片</legend>
</fieldset>
<div class="layui-form-item" id="pics">
<div class="layui-form-label">相册图集</div>
<div class="layui-input-block" style="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>
<script src="__STATIC__/jquery-3.3.1.min.js" charset="utf-8"></script>
<script src="__STATIC__/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的'http://wx.xxxxx.cn/index.php/index/index/upload http://www.wxthinkphp.com/index.php/index/index/upload-->
<script>
layui.use('upload', function(){
var $ = layui.jquery;
var upload = layui.upload;
upload.render({
elem: '#slide-pc',
url: 'http://wx.xxxxx.cn/index.php/index/index/upload',
size: 50000,
exts: 'jpg|png|jpeg',
multiple: true,
before: function(obj) {
},
done: function(res) {
if(res.code>0){
$('#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="close layui-icon"></i></div><img src="'+%20res.url%20+'" class="img" ><input type="hidden" name="pc_src[]" value="'+%20res.url%20+'" /></li>');
}else{
//如果上传失败
return layer.msg('上传失败');
}
}
});
});
//点击多图上传的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));
});
</script>
</body>
</html>
public function upload(){
// 获取上传文件表单字段名
$fileKey = array_keys(request()->file());
// 获取表单上传文件
$file = request()->file($fileKey['0']);
// 移动到框架应用根目录/public/uploads/ 目录下
$info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
if($info){
$result['code'] = 1;
$result['info'] = '图片上传成功!';
$path=str_replace('\\','/',$info->getSaveName());
$result['url'] = '/uploads/'. $path;
return $result;
}else{
// 上传失败获取错误信息
$result['code'] =0;
$result['info'] = '图片上传失败!';
$result['url'] = '';
return $result;
}
}
版权声明：本文为weixin_37799190原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。