jquery - 使用 jquery 触发隐藏输入文件标签上的点击

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 应该是跨平台的，我很困惑。这是 fiddle

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

预先感谢您的帮助!

科斯塔斯

Answer 1

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

• 使用可见性:隐藏；宽度:1px；对于文件输入元素。

The jsfiddle for it is as follow 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/