layui——上传图片，并实现放大预览

Posted 2021-02-15 fmlyzp

 一般上传文件后会返回文件的路径，然后存储到数据库，那么首先实现上传后的放大和删除功能

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

 

以上是关于layui——上传图片，并实现放大预览的主要内容，如果未能解决你的问题，请参考以下文章

基于THINKPHP+layui+Ajax无刷新实现图片上传预览

Springboot+Layui图片上传以及预览

Springboot+Layui图片上传以及预览

Springboot+Layui图片上传以及预览

LayUI上传图片

LayUI上传图片