jquery - 在隐藏的输入文件标签上使用 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

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

• 使用可见性：隐藏；宽度：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/