在JavaScript中，我可以让一个“点击”事件火的文件输入元素编程?

我想通过编程方式在<input type="file">标记上生成一个点击事件。

仅仅调用click()似乎没有做任何事情，或者至少它不会弹出一个文件选择对话框。

我一直在尝试使用侦听器捕获事件并重定向事件，但我还不能像某人点击它那样实际执行事件。

当前回答

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

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

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

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

其他回答

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

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

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

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

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

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

我的解决方案Safari与jQuery和jQuery-ui:

$("<input type='file' class='ui-helper-hidden-accessible' />").appendTo("body").focus().trigger('click');

我发现如果输入(文件)是外部形式，那么触发单击事件调用文件对话框。

如果你想让click方法在Chrome、Firefox等浏览器上也能工作，请将下面的样式应用到输入文件中。它会被完全隐藏起来，就像你在做一个显示一样:没有;

#fileInput {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: -5000px;
}

就是这么简单，我测试过了!

推荐文章