这可能是你很久没有解锁的layui 的Upload组件改写图片上

做了很多地方的调整才最终达到我自己的预期，真teme累一晚上。

Html

<div class="layui-upload" id="uploadimgbox" style="">
    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
        预览图：
        <div class="layui-upload-list" id="upload-img-list">
        </div>
    </blockquote>
    <input type="text" id="uploadImgIds">
    <div id="ts"></div>
    <div class="mark_button">
        <button type="button" class="layui-btn layui-btn-normal" id="sele_imgs">选择文件</button>
    </div>

</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="/static/index/layer/layer.js"></script>
<script src="/static/index/layui/layui.js"></script>
<script type="text/javascript" src="/static/index/layui/layui.all.js"></script>


<script id="img_template" type="text/html">
    <div style="display: inline-block; margin-right: 10px;">
        <div class="ant-upload-select ant-upload-select-picture-card">
            <p id="Ids{{ d.imgId }}" style="display: none">{{ d.imgId }}</p>
            <span style="display: inline-block; height: 100%; vertical-align: middle;"></span>
            <img src="{{ d.filePath }}" width="100%" style="">
            <button type="button" class="ant-btn ant-btn-circle close ant-btn-sm" id="delete_img"><i class="layui-icon layui-icon-close ant-anticon-close"></i></button>
        </div>
    </div>
</script>

javaScript

layui.use(['upload', 'laytpl', 'form'], function () {
    var $ = layui.jquery
        , upload = layui.upload
        , laytpl = layui.laytpl
        , form = layui.form;
    var imgCount = 0
        , count = -1
        , i = 0
        , imgIds = '';

    //多图片上传
    var uploadListIns = upload.render({
        elem: '#sele_imgs'  //开始
        , accept: 'images' /* 只能穿图片 */
        , acceptMime: 'image/*' /* 打开文件选择器时 只显示图片*/
        , url: '/index/images/imgUpload/'
        , auto: true /* 是否选完图片自动上传*/
        , multiple: true /* 是否允许多文件上传 true是 false否*/
        , number: 3 /* 设置能上传几个文件*/
        , size: 1024 * 3 /* 设置上传单一文件最大尺寸*/
        , choose: function (obj) {  //选择图片后事件
            //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
            obj.preview(function(index, file, result){
                count++;
            });
        }
        , before: function (obj) { //上传前回函数
            layer.load(); //上传loading
            console.log(obj);
        }
        ,allDone: function(obj){
            upload.render();
            /* 点击删除事件 */
            $('#upload-img-list div:last-child>button').click(function () {
                $(this).parent().parent("div").remove();
                var tIds = $(this).siblings("p").html();
                var Ids = $("#uploadImgIds").val();
                Ids = Ids.split(',');
                temp = $.grep(Ids, function (val, key) {
                    if (val.indexOf(tIds) != -1)
                        return true;
                }, true);
                $("#uploadImgIds").val(temp.join(","));

                imgIds = imgIds.split(',');
                imgIds = $.grep(imgIds, function (val, key) {
                    if (val.indexOf(tIds) != -1)
                        return true;
                }, true);
                imgIds = imgIds.join(",");
                return false;
            });
        }
        , done: function (res,index,upload) {
            var data = {
                filePath: res.filePath,
                name: res.name,
                imgId: res.imgId,
                status: res.status,
            };
            //将上传完毕图片html进去
            laytpl(img_template.innerHTML).render(data, function (html) {
                $('#upload-img-list').append(html);
            });

            imgIds = imgIds == '' ? res.imgId : imgIds + "," + res.imgId;
            if (i == count) {
                imgCount = count;
                $("#uploadImgIds").val(imgIds);
                layer.closeAll('loading');
                layer.msg('上传成功！');
            }
            i++;
            console.log(i);
        }
        , error: function (index, upload) {
            layer.closeAll('loading'); //关闭loading
            top.layer.msg("上传失败！");
        }
    });
});

Css

    <style>
        .ant-upload-select{
            display: inline-block;
        }
        .ant-upload-select-picture-card{
            border: 1px dashed #d9d9d9;
            width: 104px;
            height: 104px;
            border-radius: 4px;
            background-color: #fafafa;
            text-align: center;
            cursor: pointer;
            -webkit-transition: border-color .3s ease;
            -o-transition: border-color .3s ease;
            transition: border-color .3s ease;
            vertical-align: top;
            margin-right: 8px;
            margin-bottom: 8px;
            display: table;
        }
        .ant-upload-select-picture-card:hover{
            border-color:#ff7e39;
        }
        .ant-btn{
            line-height: 1.5;
            display: inline-block;
            font-weight: 400;
            text-align: center;
            -ms-touch-action: manipulation;
            touch-action: manipulation;
            cursor: pointer;
            background-image: none;
            border: 1px solid transparent;
            white-space: nowrap;
            padding: 0 15px;
            font-size: 14px;
            border-radius: 4px;
            height: 32px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-transition: all .3s cubic-bezier(.645,.045,.355,1);
            -o-transition: all .3s cubic-bezier(.645,.045,.355,1);
            transition: all .3s cubic-bezier(.645,.045,.355,1);
            position: relative;
            -webkit-box-shadow: 0 2px 0 rgba(0,0,0,.015);
            box-shadow: 0 2px 0 rgba(0,0,0,.015);
            color: rgba(0,0,0,.65);
            background-color: #fff;
            border-color: #d9d9d9;
        }
        .ant-btn-circle{
            width: 24px;
            height: 24px;
            padding: 0;
            font-size: 15px;
            border-radius: 50%;
        }
        .ant-upload-select-picture-card {
            position: relative;
            margin-right: 10px;
            margin-bottom: 10px;
        }
        .ant-upload-select-picture-card .close {
            position: absolute;
            top: -12px;
            right: -12px;
            -webkit-transition: all 0.3s;
            -o-transition: all 0.3s;
            transition: all 0.3s;
            opacity: 0;
        }
        .ant-upload-select-picture-card .close .ant-anticon-close{
            -webkit-transition: all 0.3s;
            -o-transition: all 0.3s;
            transition: all 0.3s;
            font-weight: 600;
            color: #d9d9d9;
        }
        .ant-upload-select-picture-card:hover .close {
            opacity: 1;
        }
        .ant-upload-select-picture-card:hover .close:hover {
            border-color:#ff7e39;
        }
        .ant-upload-select-picture-card:hover .close:hover .ant-anticon-close{
            color: #ff7e39;
        }
    </style>