layui图片上传、预览、删除

        <div class="layui-upload">
          <button type="button" id="test2" class="layui-btn tj">多图片上传</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">
              #for(tt:ccbeandb)
              <div id="" class="file-iteme">
                <div class="handle" onclick="delFile(this)"> <i class="layui-icon"
                    style="color: white ;margin-right: 40%">&#xe640;</i></div>
                <img style="width: 100px;height: 100px;" class="preview" id="imgid" src='#(tt.imgUrl)'>
                <div class="info" id="filename">#(tt.imgName)</div>
                <input type="hidden" name="imgs" value="#(tt.imgUrl)" />
              </div>
              #end
            </div>
          </blockquote>
        </div>

 <script>
          layui.use('upload', function () {
            var images = [];
            var $ = layui.jquery,
              upload = layui.upload;
            upload.render({
              elem: '#test2',
              url: '',
              data: {
                //要往后台传的值
              }

              ,
              multiple: true,
              acceptMime: 'image/*',

              ext: 'jpg|png|gif|bmp|jpeg',
              before: function (obj) {
                this.data = {
                  //要往后台传的值
                }
                layer.msg('图片上传中...', {
                  icon: 16,
                  shade: 0.01,
                  time: 0
                })
              },
              done: function (res) {
                var images = [];
                layer.close(layer.msg()); //关闭上传提示窗口
                //上传完毕
                $('#uploader-list').append(
                  '<div id="" class="file-iteme">' +
                  '<div class="handle" οnclick="delFile(this)"> <i class="layui-icon" style="color: white ;margin-right: 40%">&#xe640;</i></div>' +
                  '<img style="width: 100px;height: 100px;" class="preview" id="imgid" src=' + res.url +
                  '>' +
                  '<div class="info" id="filename">' + res.filename + '</div>' +
                  '<input type="hidden" name="imgs" value="' + res.url + '" />' +
                  '</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();
              }
            });

            delFile = function (pay) {
              var path = $(pay).next().attr('src');
              var filename = $(pay).next().next().html();
              var t = $(pay).parent()
              console.log(t)
              if (filename == "") {
                alert("还未上传图片！")
              } else {
                if (confirm("确实要删除吗？")) {
                  $.ajax({
                    type: "POST",
                    url: "",
                    data: {
                      //要往后台传的值
                    },
                    dataType: "json",
                    success: function (res) {
                      if (res == 1) {
                        t.remove();
                        layer.msg('删除成功');
                      } else {
                        layer.msg('删除失败');
                      }
                    }
                  });
                }
              }
            }

            $(document).on("click", ".file-iteme .preview", function (event) {
              var url = $(this).attr('src');
              var index = layer.open({
                type: 2,
                content: url,
                area: ['100%', '100%'],
                title: "预览",
                maxmin: true,
                closeBtn: 1
              });
              layer.full(index);

            })

          })
        </script>

  <style>
          .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 i {
            margin-right: 5px;
          }

          .uploader-list .handle i:hover {
            cursor: pointer;
          }

          .uploader-list .file-iteme {
            margin: 12px 0 0 15px;
            padding: 1px;
            float: left;
          }
        </style>

以上就是layui上传多图片的功能，悬浮可以删除,点击可以预览