在webmen文档和论坛中都没找到多图上传的示例,自己找了一个,整合了一下凑合用
引入css
<link rel="stylesheet" href="/app/admin/admin/css/muti-upload.css" />
muti-upload.css
内容如下
.uploader-list .handle {
position: relative;
background-color: black;
color: white;
filter: alpha(Opacity=80);
-moz-opacity: 0.6;
opacity: 0.6;
text-align: right;
height: 20px;
margin-bottom: -20px;
display: none;
}
.uploader-list .handle i {
display: grid;
place-items: center;
height: 20px;
}
.uploader-list .handle i:hover {
cursor: pointer;
}
.uploader-list .file-iteme {
margin: 12px 0 0 15px;
padding: 1px;
float: left;
}
.uploader-list .file-iteme img{
height: 128px;
width: 128px;
}
<br>
添加容器
将需要多图上传的字段改造成下面的格式,增加预览和上传功能,如商品详情,这里字段名为details
<div class="layui-form-item">
<label class="layui-form-label">商品详情</label>
<div class="layui-input-block">
<div class="layui-upload">
<input type="text" style="display:none" name="details" value="" id="details"/>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
预览图:
<div class="layui-upload-list uploader-list" style="overflow: auto;" id="uploader-list">
</div>
</blockquote>
<button type="button" class="pear-btn pear-btn-primary pear-btn-sm" id="multi-upload">
<i class="layui-icon layui-icon-upload"></i>多图上传
</button>
</div>
</div>
</div>
添加js
在html文件最后增加下面的js代码,将其中的UPLOAD_API
替换为你的图片上传链接,如系统默认的/app/admin/upload/image
//多图上传 start
var multiple_images = []; //多图上传array,update也需要将这行放js最前面
var upload = layui.upload;
var $ = layui.$;
upload.render({
elem: '#multi-upload',
url: UPLOAD_API,
multiple: true,
before: function(obj){
layer.msg('图片上传中...', {
icon: 16,
shade: 0.01,
time: 0
})
},
done: function(res){
layer.close(layer.msg());//关闭上传提示窗口
//上传完毕
$('#uploader-list').append(
'<div class="file-iteme">' +
'<div class="handle"><i class="layui-icon layui-icon-delete"></i></div>' +
'<img src='+ res.data.url +' alt="'+ res.data.name +'" >' +
'</div>'
);
//追加图片成功追加文件名至图片容器
multiple_images.push(res.data.url);
$('#details').val(multiple_images);
}
});
//鼠标悬浮事件
$(document).on("mouseenter mouseleave", ".file-iteme", function(event){
if(event.type === "mouseenter"){
//鼠标悬浮
$(this).children(".info").fadeIn("fast");
$(this).children(".handle").fadeIn("fast");
}else if(event.type === "mouseleave") {
//鼠标离开
$(this).children(".info").hide();
$(this).children(".handle").hide();
}
});
// 删除图片
$(document).on("click", ".file-iteme .handle", function(event){
var delImg = $(this).parent().children("img").attr("src")
var index = multiple_images.indexOf(delImg);
if (index !== -1) {
multiple_images.splice(index, 1);
}
//重新赋值
$('#details').val(multiple_images);
//删除标签
$(this).parent().remove();
});
//多图上传 end
1-3步骤与insert页差不多相同,多了第4步js调整和第5步初始化数据
调整第3步第一行放到获取数据库记录
前面
初始化数据
在给表单初始化数据
时判断指定字段并遍历赋值,例如我这里的商品详情初始化
:
<script>
// 相关接口
const PRIMARY_KEY = "id";
const SELECT_API = "/app/admin/mall-goods/select" + location.search;
const UPDATE_API = "/app/admin/mall-goods/update";
const UPLOAD_API = "/app/admin/upload/image";
var multiple_images = []; //多图上传
// 获取数据库记录
layui.use(["form", "util", "popup"], function () {
let $ = layui.$;
$.ajax({
url: SELECT_API,
dataType: "json",
success: function (res) {
// 给表单初始化数据
layui.each(res.data[0], function (key, value) {
let obj = $('*[name="'+key+'"]');
if (typeof obj[0] === "undefined" || !obj[0].nodeName) return;
if (obj[0].nodeName.toLowerCase() === "textarea") {
obj.val(value);
} else {
obj.attr("value", value);
obj[0].value = value;
}
// 商品详情初始化
if (key === "details" && value != ""){
multiple_images = value.split(",");
$.each(multiple_images, function(index, value) {
$('#uploader-list').append(
'<div class="file-iteme">' +
'<div class="handle"><i class="layui-icon layui-icon-delete"></i></div>' +
'<img src='+value +' alt="'+ value +'" >' +
'</div>'
);
});
}
//其他代码
});
感谢 用上了