layui多图上传实现删除功能

在使用layui的多图上传时发现没有删除功能

在网上搜索解决办法时有的感觉太复杂有的不符合自己所需要的所以就自己动手

下面附上代码

HTML:

<div class="layui-upload">
    <button type="button" class="layui-btn" id="test2">多图片上传</button>
    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;width: 88%">
        预览图：
        <div class="layui-upload-list uploader-list" style="overflow: auto;" id="uploader-list">
                                    
        </div>
    </blockquote>
</div>

CSS:

<style type="text/css">
        .uploader-list {
            margin-left: -15px;
        }
 
        .uploader-list .info {
            position: relative;
            margin-top: -25px;
            background-color: black;
            color: white;
            filter: alpha(Opacity=80);
            -moz-opacity: 0.5;
            opacity: 0.5;
            width: 100px;
            height: 25px;
            text-align: center;
            display: none;
        }
 
        .uploader-list .handle {
            position: relative;
            background-color: black;
            color: white;
            filter: alpha(Opacity=80);
            -moz-opacity: 0.5;
            opacity: 0.5;
            width: 100px;
            text-align: right;
            height: 18px;
            margin-bottom: -18px;
            display: none;
        }
 
        .uploader-list .handle span {
            margin-right: 5px;
        }
 
        .uploader-list .handle span:hover {
            cursor: pointer;
        }
 
        .uploader-list .file-iteme {
            margin: 12px 0 0 15px;
            padding: 1px;
            float: left;
        }
    </style>

js:

upload.render({
            elem: '#test2'
            ,url: ''
            ,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 id="" class="file-iteme">' +
                    '<div class="handle"><span class="glyphicon glyphicon-trash"></span></div>' +
                    '<img style="width: 100px;height: 100px;" src=https://'+ res.href +'>' +
                    '<div class="info">' + res.name + '</div>' +
                    '</div>'
                );
            }
        });

$(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){
            $(this).parent().remove();  
        });

 

转载于:https://www.cnblogs.com/bluealine/p/11573373.html