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

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

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

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

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


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

    });