javascript - fancybox 和响应式文件管理器中的图像预览不起作用(空字符串传递给 getElementById()。)-6ren

javascript - fancybox 和响应式文件管理器中的图像预览不起作用(空字符串传递给 getElementById()。)

转载作者：行者123 更新时间：2023-12-03 11:49:02

我使用responsivefilemanager和fancybox进行上传并添加images_url和图像预览库。当我在文件管理器fancybox中单击图像时关闭并将预览添加到图像框(无图像)但在fancybox 2.1.5中当我单击图像fancybox时不关闭并且不显示图像预览。我的代码适用于 fancybox 1.3.4，但最新版本 2.1.5 不起作用。

JS:

$(document).ready(function() {
$(function() {
    $('.thumbcheck').tooltip();
    $('#btn-sub').click(function() {
        $('#name').removeClass('has-error');
        $('#err_name').hide();
        name=   $('#gallery_name').val();
        if(name.length==0){
            $('#name').addClass("has-error");
            $('#err_name').show();
        }
        else
         $("#form-gallery").submit();
    });
    $('#append').on('click', '.btn-remove', function() {
        var parent = $(this).closest('.form-group');
        var input   =   parent.find('.width100').next('input').val();
        if($('input[name=cover]').val()==input ){
            $('input[name=cover]').val('');
        }
        parent.remove();
    });
    $("#checkall").on('ifChecked', function(event) {
        //Check all checkboxes
        $("input[type='checkbox']", ".table-striped").iCheck("check");
        $('#action-box').show();
    });
    $("#checkall").on('ifUnchecked', function(event) {
        //Check all checkboxes
        $("input[type='checkbox']", ".table-striped").iCheck("uncheck");
        $('#action-box').hide();
    });
    $(".checkbox").on('ifChecked', function(event) {
        $('#action-box').show();
    });
    $(".checkbox").on('ifUnchecked', function(event) {
        var length = $(".table-striped input[type='checkbox']:checked").length;
        if ($(".table-striped input[type='checkbox']:checked").length === 0) {
            $('#action-box').hide();
            $("#selectAll").iCheck("uncheck");
        }
    });
    $('.img-thumb').next().change(function() {
        $('.img-thumb').attr('src', $('.img-thumb').next().val())
    });
    $('#btnAdd').click(function() {
        var form_group = $('#form-group').html();
        var new_id = rand();
        var baseurl = $('#baseurl').html();
        $('#upload').clone().attr('id', new_id);
        $('#upload-img').clone().attr('id', 'img-' + new_id);
        $('.thumbcheck').clone().attr('data-id',new_id);
        $('#append').append(form_group);
        $('#upload').attr('id', new_id);
        $('#upload-img').attr('id', 'img-' + new_id);
        $('.thumbcheck').eq(-2).attr('data-id',new_id);
        $('#' + new_id).next('a').next('a').attr('href', baseurl + new_id);
        $('#' + new_id).next('a').next('a').fancybox({
            'width': '75%',
            'height': '90%',
            'autoScale': false,
            'transitionIn': 'none',
            'transitionOut': 'none',
            'type': 'iframe',
            onClosed: function() {
                var imgurl = $('#'+new_id).val();
                var check   =   $('#append').find('.thumbcheck[data-id='+new_id+']').find('i');
                console.log($('#append').find('.thumbcheck[data-id='+new_id+']'));
                console.log(check);
                console.log(check.attr('class'));
                if(check.attr('class')=='fa icon-circle-blank'){
                    console.log('sd');
                    $('#thumb').val(imgurl);
                }
                if (imgurl.length > 0) {
                    $('#img-' + new_id).attr('src', ''+imgurl);
                }
            }
        });
        $('.thumbcheck').tooltip();
    });
    $(document).on('click','.thumbcheck',function(){
        var value   =   $('#'+$(this).data('id')).val();
        if($(this).find('i').attr('class')=='fa icon-circle'){
            $(document).find('.thumbcheck i').attr('class','fa icon-circle');
            $(this).find('i').attr('class','fa icon-circle-blank');
            $('input[name=cover]').val(value);
        }
        else {
            return false;
        }
    });
    $('.boxGetFile').fancybox({
        'width': '75%',
        'height': '90%',
        'autoScale': false,
        'transitionIn': 'none',
        'transitionOut': 'none',
        'type': 'iframe',
        onClosed: function(link, index) {
                var id      =   $(link).data('id');
                var imgurl  =   $('#'+id).val();
                var check   =   $(document).find('.thumbcheck[data-id='+id+']').find('i');
                if(check.attr('class')=='fa fa-circle'){
                    $('input[name=cover]').val(imgurl);
                }
                if (imgurl.length > 0) {
                    $('#img-' + id).attr('src',  ''+imgurl);
                }
            }
    });
});
function rand() {
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

    for (var i = 0; i < 8; i++)
        text += possible.charAt(Math.floor(Math.random() * possible.length));
    return text;
}

});

HTML:

<div class="form-group">
   <label class="col-sm-3 control-label"></label>
      <div class="col-sm-9">
        <a class='btn btn-primary btn-xs' id='btnAdd'>Add Image</a>
      </div>
</div>
<div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                                            </div>
                </div>

        </div>
    </div>

</div>
<div id='baseurl' style="display:none">http://madenade.besaba.com/file/filemanager/dialog.php?type=2&field_id=<</div>
<div style="display: none;" id='form-group'>

    <div class="form-group custom-cols">
        <div class="col-sm-12 control-label">
            <div class="col-sm-2">
                <div class="input-append">
                    <div class='col-sm-10 no-pad'><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAL0AAACUCAIAAABJFr+ZAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAA3DSURBVHja7J1fS1RdFMbP+2pYYChYmDSQkJiQkKSUYNhFoZKQXU0Xgd3pN+hD9A3yLqELhYK8kAwMCoSMFAUFDYQJFBpQSDBKMHgfZr0tdvvMnD/jmfHMmee5iKOzz0y1f7P+7L3WPv/s7u46FBVS//K/gCI3FLmhyA1FbiiK3FDkhiI3FLmhyA1FkRuK3FDkhiI3FLmhKHJDkRuK3FDkhiI3FEVuKHJDmdrY2Pj48WNJP6KW/8tJ0vfv39+/f7+5uXn69OmOjo7GxkZyQ/kINubTp0+/fv3CNf78+vUruaG8BETevHmzv78vP164cOH27duXLl2in6J8HJP8CPd048aN3t7eUn8uuUmIY4KuXbsGMwN0yvDR5KYi9e3bt9evX5fTMZGbhEihuXnzJqAp86dz/aYiBQMDXOR6Y2Oj/H8BclOpAjcSysDwlHqVj9wkR4BG3ROiYyRWHuEzci7GN9WVZsMNyQre4OCg9SoSKHkVKRXIGBkZsQaY6zqtra0RBs7kJqbClMNO4E/9EbPe0dFhDYPJmZycxMXm5qaMkd+DpLm5OXNd5+fPnxH+9f7hOW0xzLFhPJQYVUNDw+PHj93LMxi8uLgoA8bHx52yrOuQm3gJU/7hwwczb2pvb4eLwUWhW8DHxMSEUAJEstksyNPbS7SuQ25iJHiW1dVVucZk9/b2Bpxy3IV7rai5pBsOjG9iBw2mfGBgwB3KeEgD5NI5JubhcRRmXaFJp9OhoNEAWa9xe6l3qcjNyQuhydu3b+Ua0HiEMh4yV5CRe5f670xuTl4rKysS1fb39xcHjSjUCvIxa0nJzclLY+Gurq4i7jJj4SAryPj91NTUzMwMEjfNvBgXV5gwi7Kei9QpYFCiq8B1dXVWJOS9goxfwraZeX4mkynOwpGbE5Z+44Ok3FZ1H65bW1st2gqtIIMnjNfqC/weI4t2i+Tm5O1NwJHWKrDEMbAf1iKNBMiyggyzND4+jo9Akq9ZurgzWKbj/LXJTWXYJKu6r729XdwN/nT3u4AbRD8gDLcglDG3LG7mdPwsnXFxBQjTLNDgAjnX6OiouZRsrRRbAbJCg/G4Mar1QHJzkq4HOnPmjFxks9lCY2BOgAs8y9jYmHolLasAGe6SPwxWsAAKBj98+PA4Sb6lmidPnnCmIxSikNnZWXgWRKy1tbVBbMnS0hIufvz4gckudEsqlWprazNfxY01NTViTvBxnZ2d1r3nzp2Dt4JXQlaF26P9Z5KbKIUoZHl5+ejoaG9vDzPa3NxcX1/vy83a2trh4SHugl0JZRJAg9wLISe34MBHd3d3W7RFJfqpiAMRM5idnp52r865pakNbJWZLgXR0NCQXCBAdvvH0u1SkZso1dDQIBdXrlxx/hTd+db2dnV16f4A8upQnwiT5l4KKoPITZRqaWmRCwQ3akUWFxcnJyc9DInUyqjZcFf6eXtGJbWIXXRyEy97g6/+YE7648TEhAcQyJI0sgEKQSwHQMRIeU/c665aJzcVIwS24nEk1IDJQfYrv8E0T01NeWxBDwwM6EgERt5WB69ijGw4SJ1XedrCmU+FE+by4OAgyNxkMpn9nPr6+oQkeJCdnR3cLvONCyQ+7hwH6Q/MlaCA3Gp9fR0j63Myh8EULSwszM/PyxvC0qTTaaTcZf4PYX2xv2RHEBfSLeAt7S4YHR1V1yO705pb4fewEHlTboAF72MGQ4BJtxF081wTsbIdQEF7E05IiBCryhpJTU2N7wIa7IHGHEoGrEtbW5su08FUwK4ACLedEPuEL7Pygc/d/yNcK0wPHjzo7u4uxdoMuYlAS0tLOoXZbBaT6v39/v37N1yMk1uuRVZlvpTKaWtr6ygnoIM/rTESr3R2doovw0djjPnS5cuX4QGHhoZKdwYb/VQEshqawI27ndbS06dPndw+IoLivJ4IAbL+iGF4Qw8W4bNk68p0WCcu5lNBE2zJsaUYKkg27h4GAkChCY0MQ4rukXgDqUs5xQcachMotXZyK7m6qubbLaATbNKA4Pr58+dqusBBf3+/8jQ5OVn+s0iOI9Zt+UjrHJqbm2FIJD7FHHu0QoIJMTZIfxAae5TbtbS0aPYEpPDOJ5UfMS6OWJhFyavBDUyOrK94B8iSLonhgcl59eqVeaaaWdVgre7gbQPuotNPVQA3mg+DGymGkvUYXz8F4EzHlLfcDoPT6bRuZoGzTCZDP5WQoBgGQ4KVwcFBhLGOq1vAlLWg51sHLvV4+BS84XF6DGhvSqiwBS5qP2TNTUo2fQNknXsp7gzSPICAKdpSTnIT5WIMrIW1kB+QG02Ourq6JNP2aKfVspjg3XSVpWrhBrP+7NkzRBsgBi7Gu6oh73qM2qog7bR6S6gadXITR5k7glLVEPaUTW058A2QtYArVBEWuYmdzGM+1BhIJZ5vkZRCYB6tqHVSeVeQ9SM8ulvITRwFB4E4xmwsMo/5QGwr14DGd622rq7O7XS8A2Qt4IJBSqSrSiY34AA0wBLAiWgIbMYlq6ur6XRas2jEPXBbhYLlQjmOd4CsoXE5y8XJTZGCy9D418nVh5uvahcjZjqTySDvVZsh+4vezzqw/JEJorsNRWmjvakAxwSzofEvmEAU4j7mw5zp3t5eLcwDajMzM3Nzc27DU+iQEQ2QHVeftng3vOqusEmAkrM/tbKysry8bJHU09NjDauvrz86OtrZ2cH17u5uZ2cnfiPtTvJLRLKwOqlUytwkWl9fN6uGTWGkNOri1aamJi3hq62tBY537tyJ/2ZTVXMjpXQXL14cHh6WUrpClZ2YTsQ3GKAzjTmGVdBiPNyIAea9BwcH4qTc3BTq0wYulbL4W9XcOLliPLEfmEsQ4BTYuMa86gBzppEEIQCCldrb25NoZnt7G+hgMC6EDPzorp8CeTBRoA2Rct5eBXITa+mE4YuOmZbiXJgKdyOjDrA68vEOGAzy4LPEIMFDgZvz589L1TAgc3ODuzCgu7vbfSgEuakwySkeuIDxKGQkZAAMydWrV02bBKq0qQD0wDKBBlnBg1/L29KA909kHFNd6zdOgHOgzQHuI6vAgZmlBzlWoqqU5H0G33OgdUDeI6ucXG2D2T7nJHe/idz8lel4b1ybA8yVZcssAR21TFTyuXGMBeJCG9fmCrLH2TPAC26roaEhwak1ubGnXC4KtT557BWYAl7j4+Plf1I386lAwszhe7+0tIRQdD0nJNJIZ4rOVswFYuTeQVaQiYWvYtTnW+i5kiL4CESpxZ3ybT5JECmSu/XJHHD//v1yHlxFe1O8MGELCwuzs7NmSZ6lw8PDra0tGIwiDsg0F4hDrSBT8eVGjpfSZ1Ug8Ozr67uTEy5SqVRTUxMmW45lAFgwSJj4sPNa9AoyFUduBBqpbMI3/t69e8AFU6j2oLGxEVMo7klCENliLAKdgCvISLkRA9HexJqbly9fCg2yTFIoy5X9agSw4kqAjniTYwbIoPbz589qWkp6UDS5iUz4ckvlCmLeR48e+fYZgSqtWIBDCXL6lfsdpIICzggJwbt37wCiVTRDJuK+fqNr/0NDQwGb05AKSY2Vk1sCDtt8aS4QI6KS27l1UEncbGxsSPYEGxDw6eoiLf2Up/6FDafMXhZpzC7zyb/k5ljSldn29vaibQZMTqh7EYPrARGIfwN2blMx4ka9g3a1BRcmWxpQYD9CVTgIo9E+wYvcRJ9jl+7sMfPAmOB3ITyK/Ale1alSpQ/m02M9jjQrWkjLxeOEPWWIjinW9kZOaw6S9RTXlqYGw2Nrgqo8bnwLXzSHKroNNlQWRlVMfGM2Y7vXSDQc1p0pitz870q0vNJtcvQgqrA5kZWRMSdKYB6uhd9wRu7cSh/yVsRzJdW70VslkBtrjc6C4zjPlVQTlciu/WRyE8o2eATIRT9XEsZGuME76HYVFWtu5EjOqamp4NPsESAX8VxJ5O3T09Pq6RjfnIhC1FFgUl+8ePHlyxdtnN7e3j579qzvc0rMwpe9vT1r5a25uVmOj5BHMuV9mpcZCwMaMXiwNHfv3uUUxp2bg4MDax8xOD1a+II3sepmrOdK4mJ3d9fdbg0zAzc3Pz8vBaN4w5GREZbLnJTC9TPowyPhHeShFWZeDafjkd2AG2nDxr1jY2OWf8n7XEnAAWsEOrPZrPlZSNPYx1Qx9sY0G9D169c7OjqAnRxA72t7zMpw8NHW1ma+mve5knBq4AnQyONSnD/PleQeU4VxYzWU4Et/69YtOJSA9GhlOO51V4Z7PFdSopmenp7h4eFYPfaNfiqENJkyHzYJIJBqmbuMeT2XejopRPcOw/XxtVzcq2x7Y5kNs6EEHMAe+NoejwDZnYU1/hHnKQnceHRcCz2gAViI7RF6xLXhVcvTIVJhTlQt3Dh/N5S4zQYshEQqSg8uwMra2tqpU6fAigbIyK7ZjF1F3Ph2XOelR3q8QQ/GS+tuodZJKpncOAE6rj3oQVit6VLes0WoxHLjBOi49qBHVeh0aiqx3PgeSRSEHvbxV8v6jSnfI4kKSY7wRIzMlpRq5Mb5e+NpdHSUQW41KIJ6P9/WBYrc5JfvmZ0Uucmfk3sfak+Rm/zyPdSeIjd5FORp7BS58QmQpViCIjchAmTWcSZe0Z+XDmPD3hTam2ICHf63khuKIjcUuaHIDUVuKHJDUeSGIjcUuaHIDUVuKIrcUOSGIjcUuaHIDUWRGypS/SfAALyGnk5eYdhMAAAAAElFTkSuQmCC" id='upload-img' class="width100" />
                        <input name="image_url[]" id="upload" type="text" value="" style='display: none'>
                        <a class="width24 thumbcheck" data-toggle="tooltip" data-placement="bottom" title="Gallery Cover" data-id=""><i class="fa fa-circle-o"></i></a> 
                        <a class="col-sm-8 no-pad boxGetFile"><h6>select image</h6></a>
                    </div>

                </div>
            </div>
            <div class="col-sm-7 padding-left-8">
                <input type="text" name='image_title[]' class="form-control" placeholder='Image title' />
                <input type="text" name='image_alt[]' class="form-control" placeholder='Image alt' />
            </div>
            <div class="col-sm-1">
                <a href="#" onclick="return false;" class="glyphicon glyphicon-remove btn-remove"></a>
            </div>

如何解决我的问题？

使用 fancybox 1.3.4 HERE 进行演示
未使用 fancybox 2.1.5 HERE 进行演示

注意:在演示中请点击添加图片

在每个点击图像中，我在 Firebug 控制台中看到此错误:

enter image description here

最佳答案

我认为问题中提供的元素不足以提供准确的答案，但对于赏金我会猜测;)

快速浏览一下你的源代码(没有工作)DEMO使用 fancybox v2.1.5，我发现了一些您可能需要修复才能拥有工作页面的问题:

1).您没有合适的DOCTYPE (我的意思是，根本不是 DOCTYPE)
2)。你有一只流浪</div>结束标记(第 179 行)位于 <div id="baseurl"> 之前
3)。你有一只流浪<!打开(某种)条件注释(第 204 行)
4).你没有结束</html>标签
5)。基本网址问题:

你有这个 html 行

<div id='baseurl' style="display:none">http://madenade.besaba.com/file/filemanager/dialog.php?type=2&field_id=<</div>

行末通知&field_id=<</div> :额外的<我认为这是一个错字，不是吗？

然后你就有了这个变量:

var baseurl = $('#baseurl').html();

...实际上返回:

http://madenade.besaba.com/file/filemanager/dialog.php?type=2&amp;field_id=&lt;

如果您直接在浏览器中运行该网址(在 fancybox 之外)，那么在 fancybox 中选择图像时，它会返回相同的 js 错误。我认为转义的 html 实体在某种程度上扰乱了响应式文件管理器的功能。

例如，如果您打开网址而不转义 html 实体(在新选项卡/窗口中)，例如:
http://madenade.besaba.com/file/filemanager/dialog.php?type=2&field_id=s7cJMxQl

...(不包括<错字)，唯一的错误是触发$.fancybox.close()时方法，确实有意义。

我建议您执行以下任一操作:

var baseurl = $("#baseurl").text(); // don't escape html entities

或在 data 中设置值更简洁的代码的属性，例如

<div id="baseurl" data-base="http://madenade.besaba.com/file/filemanager/dialog.php?type=2&field_id=" style="display:none"></div>

...然后是变量

var baseurl = $("#baseurl").data("base");

关于javascript - fancybox 和响应式文件管理器中的图像预览不起作用(空字符串传递给 getElementById()。)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25920021/

文章推荐： scala - 如何在 REPL 中检索 Scala 的版本？

文章推荐： rust - 如何返回对 RefCell>> 内部数据的引用？

文章推荐： asp.net-mvc-3 - 模型验证/ASP.NET MVC 3-条件必需属性

文章推荐： javascript - 运行 jshint 时无输出

带文本的 ruby 串
我正在尝试创建一个程序，其中字符串的前三个字符重复给定次数，如下所示: foo('Chocolate', 3) # => 'ChoChoCho' foo('Abc', 3) # => 'AbcAbcA
c++ - 从字符串中分 ionic 串
我有以下字符串: std::string str = "Mode:AAA:val:101:id:A1"; 我想分离一个位于 "val:" 和 ":id" 之间的子字符串，这是我的方法: std::st
c++ - 我们如何有效地压缩 DNA 串
DNA 字符串可以是任意长度，包含 5 个字母(A、T、G、C、N)的任意组合。压缩包含 5 个字母(A、T、G、C、N)的 DNA 字母串的有效方法是什么？不是考虑每个字母表 3 位，我们可以使用
python - 编辑距 ionic 串
是否有一种使用 levenstein 距离将一个特定字符串与第二个较长字符串中的任何区域进行匹配的好方法？例子: str1='aaaaa' str2='bbbbbbaabaabbbb' if str
php - mcrypt 加密将 s 串 '%00' 添加到字符串末尾
使用 OAuth 并使用以下函数使用我们称为“foo”(实际上是 OAuth token )的字符串加密 key public function encrypt( $text ) { // a

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - fancybox 和响应式文件管理器中的图像预览不起作用(空字符串传递给 getElementById()。)