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('
删除
' +
            '
');
        //删除某图片
        $("#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: ""
            });
        });

    });