layui上传图片，预览图片，删除图片，放大预览

最新推荐文章于 2024-07-31 17:38:22 发布

吃瓜群众欢乐多

最新推荐文章于 2024-07-31 17:38:22 发布

阅读量1.1w

点赞数 10

分类专栏： VUE layui 文章标签： layui

本文链接：https://blog.csdn.net/sinat_36146776/article/details/79818522

版权

VUE 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

layui

3 篇文章 0 订阅

订阅专栏

界面选择图片后如下显示：

点击每张图片的时候，放大预览

var upload = layui.upload;

关键代码：选择图片后

 choose: function (obj) {
    //将每次选择的文件追加到文件队列
    var files = obj.pushFile();
    //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
    obj.preview(function (index, file, result) {
        if (file.size > 0 && $('#ImgPreview').find('img').length === 0) {
            $('#ImgPreview').empty();
        }
        // 添加图片 ImgPreview-预览的dom元素的id
        $('#ImgPreview').append('<div class="image-container" id="container'+index+'"><div class="delete-css"><button id="upload_img_'+index+'" class="layui-btn layui-btn-danger layui-btn-xs">删除</button></div>' +
            '<img id="showImg'+index+'" style="width: 150px; margin:10px;cursor:pointer;"src="' + result + '" alt="' + file.name + '"></div>');
        //删除某图片
        $("#upload_img_" + index).bind('click', function () {
            delete files[index];/
            $("#container"+index).remove();
        });

        //某图片放大预览
        $("#showImg"+index).bind('click',function () {
            var width = $("#showImg"+index).width();
            var height = $("#showImg"+index).height();
            var scaleWH = width/height;
            var bigH = 600;
            var bigW = scaleWH*bigH;
            if(bigW>900){
                bigW = 900;
                bigH = bigW/scaleWH;
            }

            // 放大预览图片
            layer.open({
                type: 1,
                title: false,
                closeBtn: 1,
                shadeClose: true,
                area: [bigW + 'px', bigH + 'px'], //宽高
                content: "<img width='"+bigW+"' height='"+bigH+"' src=" + result + " />"
            });
        });

    });