fancybox 和响应式文件管理器中的图像预览不起作用（传递给 getElementById() 的空字符串。）
Posted
技术标签:
【中文标题】fancybox 和响应式文件管理器中的图像预览不起作用（传递给 getElementById() 的空字符串。）【英文标题】：image preview in fancybox and responsive filemanager not work (Empty string passed to getElementById().) 【发布时间】：2014-11-13 05:28:35 【问题描述】：我使用responsivefilemanager 和fancybox 进行上传并添加images_url 和图像预览库。当我单击filemanager 中的图像时，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,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" 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
NOTWorked Demo with fancybox 2.1.5 HERE
注意：在演示中请点击添加图片
在每次点击图片中，我都会在 firebug 控制台中看到此错误：
【问题讨论】：
fancybox v2.x中没有onClosed API选项，应该是afterClose
@JFK：你说得对。我改变了这一点，但对我不起作用。 madenade.besaba.com/file/index.php
@JFK：你看到新的演示了吗？
你需要debug你的JS。现在从if ( parent.tinymce.majorVersion < 4 ) 和“无法读取未定义的属性'majorVersion'”开始
没有完整代码很难说，但是您需要了解为什么函数 apply_link 的“外部”参数在您不工作的示例中是无效的。
【参考方案1】：
我认为问题中提供的元素不足以提供准确的答案，但我会猜到赏金;）
在使用 fancybox v2.1.5 快速查看您的（无效）DEMO 的源代码后，我发现您可能需要修复一些问题才能拥有一个工作页面：
1)。你没有合适的DOCTYPE（我的意思是，根本不是DOCTYPE）
2）。您在 <div id="baseurl"> 之前有一个流浪的 </div> 结束标记（第 179 行）
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&field_id=<
如果您直接在浏览器中运行该 url（在 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");
【讨论】：
我更改和编辑我的代码。关闭 fancyBox 现在工作。谢谢，但不显示图像预览！？请检查：madenade.besaba.com/file/index.php @ツツツ 当fancybox关闭时，你会收到这个js错误TypeError: imgurl is undefined http://madenade.besaba.com/file/index.php Line 123以上是关于fancybox 和响应式文件管理器中的图像预览不起作用（传递给 getElementById() 的空字符串。）的主要内容，如果未能解决你的问题，请参考以下文章