5

我正在开发一个图像上传器应用程序，除了一个仅在 Chrome 中发生的错误之外，一切都运行良好。我已将问题简化为一个未通过的回调。

问题是 .click() 触发器的 .fadeOut 回调没有触发。我在下面链接的小提琴中重新创建了一个简化版本。第一次单击开始淡出，当淡出完成时，.click 触发器不会发生。再次单击 会触发触发器。任何想法为什么？

HTML：

<div><input type="file" name="image_file" id="image_file"/></div>

<div class="overlay_wrap">
    Overlast
</div>

<a id="click" href="">Click</a>

jQuery：

$(document).ready(function() {
    $("#click").click(function(event) {
        event.preventDefault();
        $('.overlay_wrap').fadeOut(1000, function(event){
            $('#image_file').trigger('click');
        });
    });
});

http://jsfiddle.net/gg2a7/5/

感谢您的帮助！

编辑：有旧的小提琴链接，改变了。

4

2 回答 2

2

可悲的是，这行不通。这一切都与浏览器中的计时/线程功能有关。

问题的核心是：无法<input type="file" />以编程方式打开（关于SO /Google上的大量问题）。 不仅是 Chrome；Firefox 显示弹出窗口被阻止的消息，Safari 也会阻止它，并且在 IE 中表单不会提交。

这背后的原因是因为它是一个潜在的安全风险。只有用户操作才能在打开 this 中产生<input type="file" />。由于.fadeOut()，浏览器不再将其识别为用户事件。现在我们回到浏览器的时间/线程，因为这确实有效。没有任何委派，也没有其他线程/超时阻止对话框打开。

$("#click").click(function(event) {
    event.preventDefault();
    $('#image_file').trigger('click');
});

JSF中。

为了证明它实际上是，这是一个确实<input type="file" />有效的示例：<input type="button" />

HTML

<input type="button" name="image_file" id="image_file" value="type='button'" />

JS

$("#click").click(function(event) {
        event.preventDefault();
        $('.overlay_wrap').fadeOut(1000, function(){
            $('#image_file').trigger('click');
        });
    });

    $('#image_file').click(function() {
         alert('ok');   
    });

JSF中。

长话短说：你不能用淡入淡出效果来做到这一点。您可以简单地打开对话框并隐藏元素，但仅此而已。

$("#click").click(function(event) {
    event.preventDefault();
    $('.overlay_wrap').hide();
    $('#image_file').trigger('click');
});

JSF中。

于 2013-03-04T21:33:50.280 回答
0

改变你$('.overlay_wrap').fadeOut(1000,complete)的

$('.overlay_wrap').fadeOut(1000);
complete();
于 2013-03-04T20:58:24.010 回答