我有一个<input type="button">标签隐藏在视图中。我所做的是将“onClick”事件附加到任何类型的可见组件(如标签)。这是使用谷歌Chrome的开发工具或Mozilla Firefox的Firebug使用右键单击“编辑HTML”命令完成的。在这种情况下，指定以下脚本或类似的东西:

如果你有JQuery:

$('#id_of_component').click();

如果不是:

document.getElementById('id_of_component').click();

谢谢。

这招对我很管用:

<script>
    function sel_file() {
        $("input[name=userfile]").trigger('click');
    }  
</script>

<input type="file" name="userfile" id="userfile" />

<a href="javascript:sel_file();">Click</a>

你不能在所有浏览器中都这么做，IE应该允许，但Mozilla和Opera不允许。

当您在GMail中撰写消息时，“附加文件”功能以一种方式为IE和任何支持此功能的浏览器实现，然后以另一种方式为Firefox和那些不支持此功能的浏览器实现。

我不知道为什么你不能这样做，但有一件事是有安全风险的，而且你不允许在任何浏览器中这样做，那就是在HTML file元素上以编程方式设置文件名。

有一些方法可以将事件重定向到控件，但不要期望能够轻松地将事件发送到自己的消防控件，因为浏览器会出于(良好的)安全原因试图阻止它。

如果您只需要在用户单击某些内容时显示文件对话框，比如因为您想要更好看的文件上传按钮，那么您可能想要看看Shaun Inman想出的方法。

我已经能够通过在按下键、按下键和按上键事件之间创造性地转移焦点来实现键盘触发。YMMV。

我真诚的建议是不要去管它，因为这是一个浏览器不兼容的痛苦世界。轻微的浏览器更新也可能会在没有警告的情况下阻止一些技巧，你可能不得不不断地重新发明一些技巧来保持它的工作。

要做到这一点，你可以点击文件输入上的一个不可见的传递元素:

function simulateFileClick() {
  const div = document.createElement("div")
  div.style.visibility = "hidden"
  div.style.position = "absolute"
  div.style.width = "100%"
  div.style.height = "100%"
  div.style.pointerEvents = "none"
  const fileInput = document.getElementById("fileInput") // or whatever selector you like
  fileInput.style.position = "relative"
  fileInput.appendChild(div)
  const mouseEvent = new MouseEvent("click")
  div.dispatchEvent(mouseEvent)
}

您可以根据<a>标记上的“打开文件对话框”中的回答来执行此操作

<input type="file" id="upload" name="upload" style="visibility: hidden; width: 1px;     height: 1px" multiple />
<a href="" onclick="document.getElementById('upload').click(); return false">Upload</a>