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

Question

我正在测试这个在隐形顶部使用div的想法,<input type="file" />所以我可以制作一个花哨的文件上传按钮.我看过一些代码,但有些复杂.我想过尝试使用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的; 对于File输入元素.

它的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/