如果您希望拥有自己的按钮来上传文件而不是使用<input type="file" />，您可以执行以下操作：

<input id="myInput" type="file" style="visibility:hidden" />
<input type="button" value="Show Dialog" onclick="$('#myInput').click();" />

请注意，我使用了visibility: hidden, 而不是display: none. 您不能在未显示的文件输入上调用 click 事件。

这里的大多数答案都缺乏有用的信息：

是的，您可以使用 jQuery/JavaScript 以编程方式单击输入元素，但前提是您在属于用户启动的事件的事件处理程序中执行此操作！

因此，例如，如果脚本以编程方式单击 ajax 回调中的按钮，则不会发生任何事情，但是如果将同一行代码放入用户引发的事件处理程序中，它将起作用。

PSdebugger;如果在以编程方式单击之前，关键字会破坏浏览窗口...至少在 chrome 33 中...

只是为了记录，有一个不需要 javascript 的替代解决方案。这有点像黑客，利用点击标签将焦点设置在相关输入上的事实。

你需要一个<label>具有适当for属性（指向输入），可选样式像按钮（使用引导程序，使用btn btn-default）。当用户单击标签时，将打开对话框，例如：

<!-- optionnal, to add a bit of style -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<!-- minimal setup -->
<label for="exampleInput" class="btn btn-default">
  Click me
</label>
<input type="file" id="exampleInput" style="display: none" />

我不确定浏览器如何处理对type="file"元素的点击（安全问题和所有），但这应该有效：

$('input[type="file"]').click();

我已经在 Chrome、Firefox 和 Opera 中测试了这个 JSFiddle，它们都显示了文件浏览对话框。

我将 包裹input[type=file]在标签标签中，然后label根据您的喜好设置样式，并隐藏input.

<label class="btn btn-default fileLabel" data-toggle="tooltip" data-placement="top" title="Upload">
    <input type="file">
    <span><i class="fa fa-upload"></i></span>
</label>

<style>
    .fileLabel input[type="file"] {
        position: fixed;
        top: -1000px;
    }
</style>

纯 CSS 解决方案。