1. 程式人生 > 其它 >FastAdmin 修改上傳元件預覽方式

FastAdmin 修改上傳元件預覽方式

在\public\assets\js\backend-init.js中新增以下函式

$('body').on('click', '[data-tips-image]', function () {
                var img = new Image();
                var imgWidth = this.getAttribute('data-width') || '480px';
                img.onload = function () {
                    var $content = $(img).appendTo('body').css({background: '#fff', width: imgWidth, height: 'auto'});
                    Layer.open({
                        type: 
1, area: imgWidth, title: false, closeBtn: 1, skin: 'layui-layer-nobg', shadeClose: true, content: $content, end: function () { $(img).remove(); }, success: function () { } }); }; img.onerror
= function (e) { }; img.src = this.getAttribute('data-url') || this.src; });

在\public\assets\js\require-upload.js中修改以下內容

                previewtpl: '<li class="col-xs-3"><a href="javascript:void(0)" data-tips-image data-url="<%=url%>"  class="thumbnail"><img src="<%=fullurl%>" onerror="this.src=\'' + Fast.api.fixurl("ajax/icon") + '?suffix=<%=suffix%>\';this.onerror=null;" class="img-responsive"></a><a href="javascript:;" class="btn btn-danger btn-xs btn-trash"><i class="fa fa-trash"></i></a></li>',
                
//previewtpl: '<li class="col-xs-3"><a href="<%=fullurl%>" data-url="<%=url%>" target="_blank" class="thumbnail"><img src="<%=fullurl%>" onerror="this.src=\'' + Fast.api.fixurl("ajax/icon") + '?suffix=<%=suffix%>\';this.onerror=null;" class="img-responsive"></a><a href="javascript:;" class="btn btn-danger btn-xs btn-trash"><i class="fa fa-trash"></i></a></li>',