layui——上傳圖片，並實現放大預覽

 通常上傳文件後會返回文件的路徑，而後存儲到數據庫，那麼首先實現上傳後的放大和刪除功能

  function uploadSmallPic() {
        var upload = layui.upload;
        upload.render({
            elem: '#smallPic'
            , url: '/upload/uploadPic'
            , auto: false
            , number: 1
            , bindAction: '#uploadSmallPic'
            , choose: function (obj) {
                var files = obj.pushFile();
                obj.preview(function (index, file, result) {
                    $('#smallPicContent').append('<div  style="width:80px;height: 90px;float: left;margin-right: 5px" class="image-container" id="smallPicContainer' + index + '">' +
                        '<div class="delete-css"><button id="upload_smallPic_' + index + '" style="width: 20px;height: 20px;"><i class="layui-icon ayui-icon-close">' +
                        '</i></button>' +
                        '</div>' +
                        '<img id="showSmallPic' + index + '"  style="width:80px;height: 80px" src="' + result + '" alt="' + file.name + '"></div>'
                    );
                    //刪除某圖片
                    $("#upload_smallPic_" + index).bind('click', function () {
                        $("#smallPicContainer" + index).remove();
                        smallPic="";
                    });
                    //某圖片放大預覽
                    showMedia("showSmallPic" + index, "image", result);
                })
            },
            done: function (res, index) {
                smallPic = res.data;
                layer.msg(res.msg);
                $('#smallPicContent').html('');
                return delete this.files[index];
            }
        });
    }

function showMedia(id, type, src) {
 var idBar = "#" + id;
 $(idBar).bind('click', function () {
 var width = $(idBar).width();
 var height = $(idBar).height();
 var scaleWH = width / height;
 var bigH = 500;
 var bigW = scaleWH * bigH;
 if (bigW > 900) {
 bigW = 900;
 bigH = bigW / scaleWH;
 } // 放大預覽圖片
 if (type == "video") {
 layer.open({
 type: 1,
 title: false,
 closeBtn: 1,
 shadeClose: true,
 area: [bigW + 'px', bigH + 'px'], //寬高
 content: "<video width='" + bigW + "' height='" + bigH + "'controls=\"controls\" src=" + src + " />"
 });
 } else {
 layer.open({
 type: 1,
 title: false,
 closeBtn: 1,
 shadeClose: true,
 area: [bigW + 'px', bigH + 'px'], //寬高
 content: "<img width='" + bigW + "' height='" + bigH + "'controls=\"controls\" src=" + src + " />"
 });
 }

 });
}
//刪除圖片
function deleteMedia(id, index) {
 var idBar = "#" + id;
 $(idBar).bind('click', function () {
 //從map中刪除
 imgUrlList.splice(index, 1)
 //刪除div
 $("#container" + index).remove();
 });
}

但在編輯數據時須要實現數據圖片回顯

  //設置小圖
                    if (resp.data.goods.smallPic != null) {
                        smallPic = resp.data.goods.smallPic;
                        $('#smallPicContent').append('<div  style="width:80px;height: 90px;float: left;margin-right: 5px" class="image-container" id="smallPicContainer">' +
                            '<div class="delete-css"><button id="upload_smallPic_' + '" style="width: 20px;height: 20px;"><i class="layui-icon ayui-icon-close">' +
                            '</i></button>' +
                            '</div>' +
                            '<img id="showSmallPic' + '"  style="width:80px;height: 80px" src="' + smallPic + '"></div>'
                        );
                        //刪除某圖片
                        $("#upload_smallPic_").bind('click', function () {
                            $("#smallPicContainer").remove();
                            smallPic="";
                        });
                        //某圖片放大預覽
                        showMedia("showSmallPic", "image", smallPic);
                    }