layui实现图片上传,与图片放大

<div class="layui-form-item">
            <label class="layui-form-label">图片</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="uploadImage">
                    <i class="layui-icon">&#xe67c;</i>选择图片
                </button>
                <button type="button" class="layui-btn" id="submit_image">开始上传</button>
<!--                <div class="layui-upload-list" id="imageView">-->
                    <blockquote class="layui-elem-quote layui-quote-nm"
                                style="margin-top: 10px;width: 600px;">
                        预览图:
                        <div class="layui-upload-list" id="imageView"></div>
                    </blockquote>
                <input id="imageText" name="imagesUrl" type="hidden" />
            </div>
        </div>
        //上传图片
        var fileCount = 0;//控制文件数量
        var maxFileCount = 10;//文件上传最大数量,如果没有限制上传文件的数量则不需要
        var maxFileSize = 100;//文件上传最大大小
        var resultValue = 0;
        var url = "";
        upload.render({
            elem: '#uploadImage',
            url: '/management/insertImage',
            auto: false,
            //multiple: true,
            choose: function(obj){
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //layer.load();
                console.log(obj)
                //预读本地文件示例,不支持ie8
                obj.preview(function(index, file, result){
                    fileCount++;
                    if(fileCount>maxFileCount){
                        fileCount = maxFileCount;
                        layer.msg('文件数量不得超过'+maxFileCount+'个',{icon:2});
                        return;
                    }
                    //在当前ID为“imageView”的区域显示图片
                    $('#imageView').append('<img name = "edImage" ' +
                        'style="width: 150px; margin-left: 8px;" ' +
                        'src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
                    console.log(result)
//点击图片进行放大
                    $(document).on('click', '.layui-upload-img', function(data){
                        var imgSrc=$(this).attr('src');
                        layer.open({
                            type:1
                            ,title:false
                            ,closeBtn:0
                            ,skin:'layui-layer-nobg'
                            ,shadeClose:true
                            ,content:'<img style="width:100%;height:100%;" class="layui-upload-img" src="'+ imgSrc +'"/>'
                            ,scrollbar:false
                        })
                    })

                });
            },
            bindAction: '#submit_image',
            done: function(res){
                if(resultValue < fileCount){
                    url = url + res.url + ",";
                }
                $("#imageText").attr('value',url);
                // if(resultValue == 1){
                //     $("#imageText").attr('value',url);
                // }

                resultValue++;
                console.log(res)
                return layer.msg(res.message,{icon: res.code,time: 2000});
            }
        });

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值