在JavaScript中，我是否可以以编程方式为文件输入元素触发“click”事件？

javascript html

2022-08-30 00:22:11

我想以编程方式在代码上触发点击事件。<input type="file">

只是调用 click（）似乎不会执行任何操作，或者至少它不会弹出文件选择对话框。

我一直在尝试使用侦听器捕获事件并重定向事件，但我无法让它像有人点击它一样实际执行事件。

答案 1

我一整天都在寻找解决方案。这些是我得出的结论：

出于安全原因，Opera 和 Firefox 不允许触发文件输入。
唯一方便的替代方法是创建一个“隐藏”文件输入（使用不透明度，而不是“隐藏”或“显示：无”！），然后创建“下面”按钮。通过这种方式，可以看到按钮，但在用户单击时，它实际上激活了文件输入。

希望这有帮助！:)

<div style="display: block; width: 100px; height: 20px; overflow: hidden;">
<button style="width: 110px; height: 30px; position: relative; top: -5px; left: -5px;"><a href="javascript: void(0)">Upload File</a></button>
<input type="file" id="upload_input" name="upload" style="font-size: 50px; width: 120px; opacity: 0; filter:alpha(opacity=0);  position: relative; top: -40px;; left: -20px" />
</div>

答案 2

你不能在所有浏览器中都这样做，据说IE确实允许这样做，但Mozilla和Opera不允许。

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

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