$("#logo").css('opacity','0');
    
    $("#select_logo").click(function(e){
       e.preventDefault();
       $("#logo").trigger('click');
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="select_logo">Select Logo</a> <input type="file" id="logo">

对于 IE，添加以下内容：

$("#logo").css('filter','alpha(opacity = 0');

我不知道为什么没有人指出这一点，但这是一种无需任何 Javascript 的方法，并且它也与任何浏览器兼容。

编辑：在 Safari 中，input使用display: none. 更好的方法是使用position: fixed; top: -100em.

编辑 2：另一种方法是使用opacity: 0. 问题是它可能会弄乱布局。我在示例中添加了一些 CSS 来说明问题。

label {
    display: inline-block;
    background: #ddd;
    border: 1px outset #ccc;
    border-radius: .3em;
    padding: .3em 1em;
    margin: .5em;
}

label:active {
  border-style: inset;
}

<label>
  Using <code>position: fixed</code>
  <input type="file" style="position: fixed; top: -100%">
</label>

<label>
  Using <code>opacity: 0</code>
  <input type="file" style="opacity: 0">
</label>

如果您愿意，可以通过在指向输入的 中使用“正确的方式”，如下所示：forlabelid

<label for="inputId">file dialog</label>
<input id="inputId" type="file" style="position: fixed; top: -100em">

这是一个不错的

精细上传演示

它<input type='file' />本身就是一个控件。但是在它上面放置了一个 div 并应用了 css 样式来获得这种感觉。文件控件的不透明度设置为 0，以便在单击 div 时显示对话框窗口。

实际上，您不需要所有具有不透明度、可见性、<input>样式等的东西。只需看看：

<a href="#">Just click me.</a>
<script type="text/javascript">
    $("a").click(function() {
        // creating input on-the-fly
        var input = $(document.createElement("input"));
        input.attr("type", "file");
        // add onchange handler if you wish to get the file :)
        input.trigger("click"); // opening dialog
        return false; // avoiding navigation
    });
</script>

jsFiddle 上的演示。在 Chrome 30.0 和 Firefox 24.0 中测试。但是，在 Opera 12.16 中不起作用。

最简单的方法：

#file-input {
  display: none;
}

<label for="file-input">
  <div>Click this div and select a file</div>
</label>
<input type="file" id="file-input"/>

重要的是，使用 ofdisplay: none确保隐藏文件输入不会占用任何地方（使用 会发生什么opacity: 0）。