webman-admin多图上传预览和删除

前言

在webmen文档和论坛中都没找到多图上传的示例,自己找了一个,整合了一下凑合用

insert页面

  1. 引入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;
    }
    

  2. 添加容器

    将需要多图上传的字段改造成下面的格式,增加预览和上传功能,如商品详情,这里字段名为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>
    
  3. 添加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步初始化数据

  1. 调整第3步第一行放到获取数据库记录前面

  2. 初始化数据

    给表单初始化数据时判断指定字段并遍历赋值,例如我这里的商品详情初始化:

    <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>');});}//其他代码});
    

效果图

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/19578.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微信小程序学习

04.认识小程序项目的基本组成结构 把allow改成disallow,表示所有的页面不被微信进行索引。 比如修改首页的上面栏颜色

自制数据#国家2000投影带划分范围shp(高斯克吕格 3°/6°分带)

国家2000投影分带范围&#xff08;3&#xff09; https://www.123pan.com/s/lqEljv-xvCHA.html 国家2000投影分带范围&#xff08;6&#xff09; https://www.123pan.com/s/lqEljv-xvCHA.html 声明&#xff1a;转载此文不为商业用途。文字和图片版权归原作者所有&#xff0c;…

网络安全基础技术扫盲篇名词解释之“证书“

用通俗易懂的话说&#xff1a; 证书就好比是一张身份证&#xff08;类似&#xff0c;但不完全相同&#xff09;&#xff0c;用来证明一个网站的身份是否可信。就像你要确认一个陌生人的身份需要看他的身份证一样&#xff0c;电脑在连接一个网站时&#xff0c;也会查看网站的证…

延时性(过期/超时)和周期性的定时任务的实现方式

延时性&#xff08;过期/超时&#xff09;和周期性的定时任务的实现方式 一、延时性的定时任务&#xff08;例如订单超时30分钟后自动取消该订单&#xff09;1.使用DelayQueue实现任务即将到期提醒功能&#xff08;非分布式&#xff09;2.使用Redis实现任务即将到期提醒功能&am…

检查对象是否包含某一属性值

在 JavaScript 或 TypeScript 中&#xff0c;可以通过多种方式检查对象是否包含某一属性值。以下是一些常用的方法&#xff1a; 方法 1&#xff1a;in 运算符 in 运算符可以用来检查对象是否具有特定属性&#xff0c;无论该属性是在对象本身还是其原型链上。 const obj { a…

对于多amis embed渲染导致的tracker 无响应问题解决:

原因&#xff1a;是amis对于默认env(fetcher,isCancel,tracker,session)进行了缓存(env保存在store中,store被缓存到stores对象中),只使用第一次缓存的数据,除非进行了clearStoresCache. 解决方法1&#xff1a; amis.embed({ })时传入env.session,session值不同则每次embed都…

探索Web3工具:正确使用区块链平台工具的秘诀

在当今日新月异的数字时代&#xff0c;区块链技术正以惊人的速度改变着我们的生活和工作方式。尤其对于那些想要踏入区块链世界的人来说&#xff0c;正确使用区块链平台工具至关重要。本文将向您介绍一些关键的Web3工具&#xff0c;并以TestnetX.com为例&#xff0c;展示如何利…

数字化转型推动生物技术企业增长—纷享销客与集萃药康共探新动力

上周&#xff0c;在南京锦创书城&#xff0c;一场主题为“生物技术企业增长新动力&#xff1a;以客户为中心的数字化转型与创新”的研讨会圆满落幕。此次活动由纷享销客江苏分公司联合江苏集萃药康生物科技股份有限公司共同举办&#xff0c;吸引了众多生物技术领域企业的负责人…

斑消宝六周年大动作,斑小将将再迎高光时刻

如今&#xff0c;周年庆典已经成为众多品牌展示自身实力与影响力的重要舞台。这不仅仅是一个简单的庆祝活动&#xff0c;更是一次向外界展示品牌发展历程、未来规划以及团结合作伙伴的绝佳机会。在这样的背景下&#xff0c;广州斑消宝化妆品有限公司将打造别具一格的盛典&#…

npm安装依赖报错npm ERR! code ENOTFOUNDnpm ERR! syscall getaddrinfo

npm安装依赖报错 今天在学习vue的时候&#xff0c;在使用npm install vue -g来安装一个局部的vue时候&#xff0c;报出如下错误&#xff1a; npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.npm.taobao.org/vue faile…

iphone内存满了开不了机怎么办?白苹果解决办法分享!

虽然苹果手机在使用时比较顺畅&#xff0c;但是手机用久了&#xff0c;照片、视频等资料累积过多&#xff0c;也难免会导致内存不足&#xff0c;出现无法开机卡在开机界面白苹果的情况。 内存不足导致iPhone白苹果的问题很常见&#xff0c;可以说是苹果最常见的故障之一。接下来…

等保在医疗行业中有哪些具体的应用案例或实践经验?

在医疗行业中&#xff0c;等保&#xff08;信息系统安全等级保护&#xff09;是一种重要的网络安全管理制度&#xff0c;旨在确保医疗信息系统的安全稳定运行。以下是一些具体的应用案例和实践经验&#xff1a; 1. 纵深防御体系建设 医疗机构应根据“等级保护2.0标准”的要…

【学习笔记】Windows GDI绘图(九)Graphics详解(上)

文章目录 Graphics 定义创建Graphics对象的方法通过Graphics绘制不同的形状、线条、图像和文字等通过Graphics操作对象坐标 Graphics属性Clip(裁切/绘制区域)ClipBounds获取裁切区域矩形范围CompositiongMode合成方式CompositingQuality渲染质量DpiX和DpiY 水平、垂直分辨率Int…

【源码】Spring Data JPA原理解析之Repository自定义方法添加@Query注解的执行原理

Spring Data JPA系列 1、SpringBoot集成JPA及基本使用 2、Spring Data JPA Criteria查询、部分字段查询 3、Spring Data JPA数据批量插入、批量更新真的用对了吗 4、Spring Data JPA的一对一、LazyInitializationException异常、一对多、多对多操作 5、Spring Data JPA自定…

C++ 逻辑运算

一 逻辑运算 2 逻辑运算符 逻辑表达式 四 逻辑表达式 五 逻辑运算符的优先级 六 注意事项 注意 总结

JVM学习-字节码指令集(四)

异常处理指令 抛出异常指令 athrow指令&#xff1a;在Java程序中显示抛出异常的操作(throw语句)都是由athrow指令来实现除了throw语句显示抛出异常情况之外&#xff0c;JVM规范还规定了许多运行时异常会在其他Java虚拟机指令检测到异常状况时自动抛出&#xff0c;在之前介绍的…

MySQL中,不能在一个DML(数据操纵语言,如INSERT, UPDATE, DELETE)语句中直接引用目标表进行子查询

错误示例 <delete id"deleteOldRelations">DELETE FROM departments_closure_tableWHERE descendant IN ( SELECT descendant FROM departments_closure_tableWHERE ancestor #{departmentId})</delete>程序运行之后&#xff0c;会报错&#xff1a;You …

vcruntime140_1.dll在哪个文件夹?详细修复vcruntime140_1.dll缺失的方法

vcruntime140_1.dll文件是什么&#xff1f;相信很多人都对它很陌生吧&#xff1f;毕竟大部分人对于dll文件还是了解得太少了&#xff0c;当突发情况出现vcruntime140_1.dll文件丢失&#xff1f;你要怎么办&#xff1f;不要担心&#xff0c;下面我们就来给大家详细的讲解一下修复…

GPT-4o:人工智能技术的新巅峰

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 目录 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌…

Maven简介和快速入门

1.1Maven介绍 Maven – Introduction (apache.org) Maven就是一个软件&#xff0c;掌握软件安装、配置、以及基本功能&#xff08;项目构建、依赖管理&#xff09;。 1.2Maven主要作用 1.依赖管理&#xff1a; Maven 可以管理项目的依赖&#xff0c;包括自动下载所需依赖库、…