原创

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/sinat_36146776/article/details/79818522

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

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

 

 

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 + " />"
            });
        });

    });

 

 

 

 

 

文章最后发布于: 2018-04-04 15:58:06
展开阅读全文
0 个人打赏

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 创作都市 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览