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

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"> &#xe624; </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">&#xe7a5;</i>
                                            <i class="layui-icon icon-myself" id="deleteImg">&#xe7f9;</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');
                });
            }
        });

    });