Question

我正在测试这个在隐形<input type="file" />之上使用div的想法，所以我可以创建一个花哨的文件上传按钮。我看过一些代码，但有些复杂。我想过尝试使用jQuery从其div容器中触发输入标记的单击

HTML：

<div id="container">&nbsp;Click Me!&nbsp;
    <input type="file" id="file" />
</div>

使用Javascript：

$(document).ready( function() {
    $('#container').click( function() {
        $('#file')[0].click();
    })
});

虽然代码在Chrome和IE上运行正常，但它不能在Safari上运行，而且Firefox有一个有趣的问题：它会触发点击两次！知道为什么会这样吗？ jQuery应该是跨平台的，我很困惑。这是小提琴

http://jsfiddle.net/kostasd/C4sCs/1/

提前感谢您的帮助！

科斯塔斯

Answer 1

我尝试的不同可能的解决方案是

使用Visiblity：隐藏;宽度：1px的;对于文件输入元素。

它的jsfiddle如下 http://jsfiddle.net/C4sCs/36/

仅使用Css调用文件输入点击而根本不使用jquery

#container {
border:1px solid #b0b0b0;
display: inline-block;
position:relative;
overflow:hidden;
cursor:pointer;
}
#file {  
position:absolute;
top:0;
opacity:0;
display:block;
}

http://jsfiddle.net/C4sCs/42/

触发在隐藏的输入文件标记上单击jquery

1 个答案: