layui实现上传图片鼠标悬浮展示删除及预览图标

**
进行layui实现图片上传功能时，发现无法实现悬浮展示删除及预览图标功能，查询很多资料后，自己整合一套自己的方法，特此记录。

整体思路就是使用鼠标悬浮和移出时间，及div层叠方法

由于对前端不是很了解，对于不足部分，待以后完善!!!

实现功能展示

html代码

<form class="layui-form layui-table-form" style="text-align: center" action="" lay-filter="cfg-form"id="cfg-form"><div class="layui-form-item" id="imgItem"><label class="layui-form-label">上传图片：</label><div class="layui-input-inline" id="imgItemInfo"><div class="layui-upload-drag-self" id="importImg"><i class="layui-icon" id="uploadIcon">  </i><div class="layui-hide" id="uploadDemoView"><img class="layui-upload-img" id="imgs" src=""><div class="handle layui-hide" id="handle"><i class="layui-icon icon-myself" id="preImg"></i><i class="layui-icon icon-myself" id="deleteImg"></i></div></div></div></div></div></form>

css样式-layui自有样式不记录，记录自定义样式

.layui-upload-drag-self {background-color: #fbfdff;border: 1px dashed #c0ccda;border-radius: 6px;box-sizing: border-box;width: 148px;height: 148px;line-height: 146px;vertical-align: top;display: inline-block;text-align: center;cursor: pointer;outline: 0;
}.layui-upload-drag-self .layui-icon {font-size: 28px;color: #8c939d
}.layui-upload-img {width: 100%;height: 148px;border-radius: 6px;
}.handle {position: absolute;width: 148px;height: 148px;z-index: 999;border-radius: 6px;top: 0;left: 20px;background: rgba(59, 60, 61, 0.6);text-align: center;
}.handle .icon-myself {z-index: 10;transition: all .3s;cursor: pointer;font-size: 25px;width: 25px;color: rgba(255, 255, 255, 0.91);margin: 0 4px;
}

js代码

layui.use([ 'form', 'layer', 'upload'], function () {var $ = layui.jquery,layer = layui.layer,upload = layui.upload;//删除图片$('#deleteImg').on('click', function () {$('#uploadDemoView').addClass('layui-hide');$('#uploadIcon').removeClass('layui-hide');return false;});//图片预览$('#preImg').on('click', function () {var iHtml = "<img src='" + $('#imgs').attr('src') + "' style='width: 100%; height: 100%;'/>";layer.open({type: 1,shade: false,title: false, //不显示标题area: ['40%', '60%'],content: iHtml //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响});return false;});//图片绑定鼠标悬浮$(document).on("mouseenter", ".layui-upload-drag-self", function () {//鼠标悬浮$('#handle').removeClass('layui-hide');}).on("mouseleave", ".layui-upload-drag-self", function () {//鼠标离开$('#handle').addClass('layui-hide');});//拖拽上传upload.render({elem: '#importImg', url: '/img/upload' //改成您自己的上传接口, before: function (obj) {obj.preview(function (index, file, result) {$('#imgs').attr('src', result);$('#uploadDemoView').removeClass('layui-hide');$('#uploadIcon').addClass('layui-hide');});}});});

layui实现上传图片鼠标悬浮展示删除及预览图标相关推荐

微信小程序上传图片、长按删除及预览图片
也是电商里做的上传评论图片之类的,如果用根据我文章中需要改的改一下就可以用了首先是wxml <view class="conts"><view class=&q ...
echarts实现3D地图，轮播功能、背景图片、鼠标悬浮展示数据，附源码！
echarts实现3D地图,轮播功能.背景图片.鼠标悬浮展示数据,附源码! 一.图片效果二. 代码一.图片效果由于本地图片上传失败,无法展示完整的,不过是在此图的基础上加了轮播和底纹二. 代码 ...
微信小程序上传图片及文件（上传、下载、删除及预览）
微信小程序上传附件上传文件及图片下载,预览.删除自定义封装组件哪儿用哪儿调用即可 wxml代码 <!-- <view>上传文件(我是子组件)</view> --& ...
微信小程序上传图片组件，多选+单选+预览+删除
微信小程序上传图片+预览+删除组件代码 HTML <view class="uploadImg-wrap"><view class="upload-f ...
微信小程序图片上传到服务器再自动替换,微信小程序批量上传图片到服务器，并实现预览，删除功能...
js代码 Page({ /** 页面的初始数据 / data: { files: [], //门店图片信息,数组图片保存作为数据源 }, /* 多图片上传 */ chooseImage: functi ...
vue element 单张图片上传，删除，预览
功能点: 点击'查看图片'按钮,弹窗中会展示图片,第一次看到的图片是从父组件传过来的图片,点击删除按钮,调取删除接口删除图片,在重新上传图片,data中放入列表那一项的数据,上传成功,图片需要回显,此 ...
Vue中使用el-popover实现悬浮弹窗显示图片预览
场景数据库中存储照片的磁盘路径,需要鼠标在el-table的路径字段上悬浮时弹窗进行图片网络URL的预览,所以需要在悬浮后对图片路径进行磁盘路径和网络URL映射路径的转换. 注: 博客: htt ...
Excel中如何删除打印预览中最后的空白页？
1.进入"分页预览"模式,方法:在Excel底端,点击右下角分页模式按钮 2.在分页模式下,我们发现有最后一个蓝色边框的空白列,此空白列中标识这空白页的页码,鼠标悬停蓝色边框内,右 ...
layui列表显示缩略图_layui 表格中实现照片预览，点击查看原图
人员表格中实现照片预览,并且可点击放大.查看原图 js //定义列 var cols = [ [{ type: 'radio', width: 60 }, { type: 'numbers', wid ...

layui实现上传图片鼠标悬浮展示删除及预览图标

layui实现上传图片鼠标悬浮展示删除及预览图标

layui实现上传图片鼠标悬浮展示删除及预览图标相关推荐

最新文章

热门文章