前言
在webmen文档和论坛中都没找到多图上传的示例，自己找了一个，整合了一下凑合用
insert页面
-
引入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; }
-
添加容器
将需要多图上传的字段改造成下面的格式，增加预览和上传功能，如商品详情，这里字段名为
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
update页
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>');});}//其他代码});
效果图
