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');});}});});
