fastadmin 上传图片并可以进行裁剪;图片列表图片放大功能

1、上传图片并进行裁剪的重要地方

class="btn btn-danger plupload cropper"
plupload    //点击上传按钮上传图片
cropper    //图片裁剪
 <div class="form-group">
        <label for="c-字段" class="control-label col-xs-12 col-sm-2">(名称):</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-字段" class="form-control" size="35" name="row[字段]" type="text" value="" >
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="faupload-字段" class="btn btn-danger plupload cropper" data-input-id="c-字段" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-字段"><i class="fa fa-uploadname"></i> {:__('Upload')}</button></span>
                    <span><button type="button" id="fachoose-字段" class="btn btn-primary fachoose" data-input-id="c-字段" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                </div>
                <span class="msg-box n-right"></span>
            </div>
            <ul class="row list-inline faupload-preview" id="p-字段"></ul>
        </div>
    </div>

参考网站:https://www.fastadmin.net/store/cropper.html

2、图片放大功能

formatter: function(value){
                                return "<a href='javascript:void(0)' data-tips-image='"+value+"'><img src='"+value+"' class='img-sm img-center' ></a>";
                            }},
 //列表图片放大功能
            table.on('post-body.bs.table', function (e, settings, json, xhr) {
 
                // 预览图弹出处理
                $('img').parent('a').attr('href','javascript:;');//去掉图片oss连接地址
                $('img').bind('click',function(){
                    var imgs = $(this).parents('td').find('a img');
                    var dataJson = [],item={};
                    for (var i = 0; i < imgs.length; i++) {
                        item['alt'] = '';
                        item['pid'] = Math.random()*10;
                        item['src'] = item['thumb'] = $(imgs[i]).attr('src');
                        dataJson.push(item);
                        item = {}; // 重置
                    }
                    var json =  {
                        "title": "", //相册标题
                        "id": 123, //相册id
                        "start": 0, //初始显示的图片序号,默认0
                        "data": dataJson
                    };
                    Layer.photos({
                        photos: json,
                        anim: 0 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数)
                    });
                })
            });
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值