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);
                    }

原文地址：https://www.cnblogs.com/fmlyzp/p/10663810.html