Layui 完美实现图片上传 预览 以及预览时候可删除图片

1，先引用基本jq脚本及相关依赖脚本

<link href="~/Scripts/layui/css/layui.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/layui/layui.js"></script>

2，前端页面

<span>上传图片:</span>
            <div class="upload" id="test1">+</div>
            <div class="layui-upload-list"></div>
            <div><button type="button" class="layui-btn-radius" id="save"><i class="layui-icon ">&#xe67c;</i>点击上传</button></div>

3，js方法

 layui.use(['upload', 'jquery'], function () {
        var upload = layui.upload;
        var $ = layui.jquery;
        //执行实例
        var uploadInst = upload.render({
            elem: '#test1', //绑定元素
            multiple: true,
            auto: false,
            acceptMime: 'image/*',
            bindAction: "#save",//绑定上传
            url: '/SendNotice/Upload', //上传接口
            choose: function (obj) { //obj参数包含的信息，跟 choose回调完全一致
                //将每次选择的文件追加到文件队列
                let UPLOAD_FILES = obj.pushFile();
                for (let x in UPLOAD_FILES) {
                    delete UPLOAD_FILES[x];
                }
                //layer.load(); //上传loading
                obj.preview(function (index, file, result) {

                files = obj.pushFile();
                    $(".layui-upload-list").append('<img src="' + result + '" id="remove_' + index + '" title="双击删除该图片" style="width:200px;height:auto;">')
                    $('#remove_' + index).bind('dblclick', function () {//双击删除指定预上传图片
                        delete files[index];//删除指定图片
                        $(this).remove();
                    })
                    //console.log(1, index); //得到文件索引
                    //console.log(2, file.name); //得到文件对象
                    //console.log(3, result); //得到文件base64编码，比如图片
                })
            },
            done: function (res) {
                imgs = imgs.concat(res.Data)
                console.log(imgs)
                if (res.Result) {
                    layer.msg("图片上传成功！", { icon: 1, time: 1000 });
                }
                //上传完毕回调
            },
            error: function () {
                //请求异常回调
            }
        });
    });

提示：为预览图片绑定双击删除事件，事件执行时候可通过索引删除相应图片，且图片源也会相应删除，从而实现真正删除预上上传的图片。