我知道这很老了，所有这些解决方案都是针对浏览器安全预防措施的黑客，具有真正的价值。

也就是说，到今天为止，fileInput.click()可以在当前的Chrome (36.0.1985.125 m)和当前的Firefox ESR(24.7.0)中工作，但不能在当前的IE(11.0.9600.17207)中工作。在一个按钮的顶部覆盖一个不透明度为0的文件字段是可行的，但是我想要一个链接元素作为可见的触发器，并且悬停下划线在任何浏览器中都不太适用。它闪烁着然后消失了，可能是浏览器在考虑是否实际应用悬浮样式。

但我确实找到了一个在所有这些浏览器中都能工作的解决方案。我不会说我测试过所有浏览器的每个版本，也不会说我知道它会一直工作下去，但它现在似乎满足了我的需求。

这很简单:将文件输入字段定位到屏幕外(Position: absolute;顶部:-5000px)，在它周围放一个标签元素，并触发标签上的点击，而不是文件字段本身。

请注意，链接需要编写脚本来调用标签的click方法，它不会自动完成，就像单击标签元素中的文本一样。显然，link元素捕获了点击，而没有传递到标签。

还要注意，这并没有提供显示当前所选文件的方法，因为该字段是屏幕外的。我想在文件被选中时立即提交，所以这对我来说不是问题，但如果您的情况不同，您将需要某种不同的方法。

希望这能帮助到一些人——我花了2个小时用头撞它:

在IE8或IE9中，如果你用javascript以任何方式触发打开一个文件输入(相信我，我都试过了)，它不会让你用javascript提交表单，它会默默地失败。

通过常规的提交按钮提交表单可以工作，但调用form.submit();会默默失败。

我不得不使用一个透明的文件输入来覆盖我的选择文件按钮。

这将在Firefox 4中实现，但需要注意的是，它被视为一个弹出窗口，因此无论何时弹出窗口都将被阻止。

您可以在任何浏览器上触发click()，但有些浏览器需要元素是可见和聚焦的。下面是一个jQuery示例:

$('#input_element').show();
$('#input_element').focus();
$('#input_element').click();
$('#input_element').hide();

它与click()之前的隐藏一起工作，但我不知道它是否在不调用show方法的情况下工作。从来没有在Opera上尝试过，我在IE/FF/Safari/Chrome上测试过，它是有效的。我希望这能有所帮助。

我一整天都在寻找解决办法。以下是我得出的结论:

出于安全原因，Opera和Firefox不允许触发文件输入。 唯一方便的选择是创建一个“隐藏”文件输入(使用不透明，而不是“隐藏”或“显示:none”!)，然后在它下面创建按钮。通过这种方式，按钮是可见的，但用户单击它实际上激活了文件输入。 上传文件

你可以使用

<button id="file">select file</button>
<input type="file" name="file" id="file_input" style="display:none;">
<script>
$('#file').click(function() {
        $('#file_input').focus().trigger('click');
    });
</script>