使用layui进行多图片上传--带预览、删除图标

对于layui的多图片上传，网上的示例千篇一律,并且都不符合我的要求，通过自己的研究，较好的实现了自己的需求，不过由于对前端部分内容不是很了解，部分CSS都是自己写的，所以并不是最好的实现，但是能满足自己的需求

一、实现的效果:

1.上传图片

2.删除图片

3.获取图片url

二、代码部分：

1.html代码

 <div class="layui-col-md12 layui-col-sm6 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header" id="form-header">上传图片</div>
                <div class="layui-card-body">
                    <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>
                            <button type="button" id="importModel" class="layui-hide">图片导入</button>
                            <div class="layui-input-inlines-self" id="imgItemInfo">
                                <div class="layui-upload-drag-self" id="importImg0">
                                    <div id="imgDivs0">
                                        <i class="layui-icon" id="uploadIcon0"> &#xe624; </i>
                                    </div>
                                    <div class="img layui-hide" id="uploadDemoView0">
                                        <img class="layui-upload-img" id="imgs0" src="">
                                        <div class="handle layui-hide" id="handle0">
                                            <i class="layui-icon icon-myself" id="preImg0">&#xe7a5;</i>
                                            <i class="layui-icon icon-myself" id="delImg0">&#xe7f9;</i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item" id="button-group">
                                <div class="layui-inline">
                                    <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="getUrls"
                                            lay-submit=""
                                            lay-filter="getUrls-form-submit" data-type="submit">获取图片url的值
                                    </button>
                                </div>
                            </div>
                    </form>
                </div>
            </div>
        </div>

2、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: 148px;
    vertical-align: top;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    outline: 0;
    margin-right: 13px;
    float: left;
}

.layui-input-inlines-self {
    position: relative;
    margin-left: 90px;
    min-height: 36px;
    text-align: left;
}

.layui-upload-drag-self .layui-icon {
    font-size: 28px;
    color: #8c939d
}
.layui-upload-drag-self .img {
    position:relative;
    height: 148px;
    width: 148px;
}

.layui-upload-img {
    width: 148px;
    height: 148px;
    border-radius: 6px;
    margin-top: -3px;
    margin-left: -2px;
}


.handle {
    position: absolute;
    width: 148px;
    height: 100%;
    z-index: 100;
    border-radius: 6px;
    top: 0;
    background: rgba(59, 60, 61, 0.6);
    text-align: center;
}

.handle .icon-myself {
    z-index: 999;
    transition: all .3s;
    cursor: pointer;
    font-size: 25px;
    width: 25px;
    color: rgba(255, 255, 255, 0.91);
    margin: 0 4px;
}

3、js代码

layui.use(['form', 'layer',  'upload'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            form = layui.form,
            upload = layui.upload;

        //删除图片
        $(document).on('click', '[id^=delImg]', function () {
            var importImgF = $('#imgItemInfo').find('div:first');//importImg0、importImg1、importImg2
            var empt = $(this).parent().parent().parent();//importImg0、importImg1、importImg2
            var nextImgSrc = $(this).parent().parent().parent().next().find('img').attr('src');//src
            //判断当前DIV后面的div的url是否为空
            if (!nextImgSrc) {
                //判断是否为第一个
                if (importImgF.attr('id') === empt.attr('id')) {
                    //-是 ，清空第一个 最后面的删除
                    //图片url清空
                    empt.find('img').attr('src','');
                    $(this).parent().parent().addClass('layui-hide');
                    importImgF.find('i:first').removeClass('layui-hide');
                    count--;
                    $('#' + 'importImg' + count).remove();
                } else {
                    // -否，删除当前
                    empt.remove();
                }
            } else {
                //如果有值删除当前div
                empt.remove();
            }
            return false;
        });

        //图片预览
        $(document).on('click', '[id^=preImg]', function () {
            var iHtml = "<img src='" + $(this).parent().parent().find('img:first').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", ".img", function () {
            //鼠标悬浮
            $(this).find('div:first').removeClass('layui-hide');
        }).on("mouseleave", ".img", function () {
            //鼠标离开
            $(this).find('div:first').addClass('layui-hide');
        });


        var imgsId,
            uploadDemoViewId,
            uploadIconId;

        $(document).on('click', '[id^=imgDivs]', function () {
            //给id赋值
            uploadIconId = $(this).find('i').attr('id');
            uploadDemoViewId = $(this).next().attr('id');
            imgsId = $(this).next().find('img').attr('id');
            $('#importModel').click();
        });
        var count = 1;

        upload.render({
            elem: '#importModel'
            , multiple: true
            , url: 'http://172.17.62.113:8080/img/upload' //改成您自己的上传接口
            , done: function (res) {
                if (res.code !== 200) {
                    return layer.msg('上传失败')
                }
                $('#' + imgsId).attr('src', res.data);
                $('#' + uploadDemoViewId).removeClass('layui-hide');
                $('#' + uploadIconId).addClass('layui-hide');
                $('#imgItemInfo').append(
                    '<div class="layui-upload-drag-self" id="importImg' + count + '">' +
                    '<div id="imgDivs' + count + '">' +
                    '<i class="layui-icon" id="uploadIcon' + count + '"> &#xe624; </i>' +
                    '</div>' +
                    '<div class="img layui-hide" id="uploadDemoView' + count + '">' +
                    '<img class="layui-upload-img" id="imgs' + count + '" src="">' +
                    '<div class="handle layui-hide" id="handle' + count + '">' +
                    '<i class="layui-icon icon-myself" id="preImg' + count + '">&#xe7a5;</i>' +
                    '<i class="layui-icon icon-myself" id="delImg' + count + '">&#xe7f9;</i>' +
                    '</div>' + '</div>' + '</div>'
                );
                count++;
            }
        });

        form.on('submit(getUrls-form-submit)', function (data) {
            //使用data.field获取不到值
            var imgs = $('[id^=imgs]');
            var imgArray=[];
            imgs.each(function () {
                var url=$(this).attr('src');
                //滤空
                if (url){
                    imgArray.push(url);
                }
            });
            alert(JSON.stringify(imgArray));
            return false;
        });

        //也可绑定单击事件获取url数组
/*        $('#getUrls').on('click',function () {
                var imgs = $('[id^=imgs]');
                var imgArray=[];
                imgs.each(function () {
                    var url=$(this).attr('src');
                    //滤空
                    if (url){
                        imgArray.push(url);
                    }
                });
                alert(JSON.stringify(imgArray));
                return false;
        })*/
    });