我想以<input type="file">编程方式在标签上触发点击事件。
只是调用 click() 似乎没有做任何事情，或者至少它不会弹出文件选择对话框。
我一直在尝试使用侦听器捕获事件并重定向事件，但我无法像有人单击它那样实际执行事件。
在 JavaScript 中，我可以为文件输入元素以编程方式触发“点击”事件吗？
IT技术
javascript
html
2021-02-02 01:21:26
6个回答
我一整天都在寻找解决方案。这些是我得出的结论：
- 出于安全原因，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>
你可以这样做，在所有的浏览器，IE理应不会允许它，但Mozilla和Opera没有。
当您在 GMail 中撰写邮件时，“附加文件”功能以一种方式用于 IE 和任何支持此功能的浏览器，然后以另一种方式用于 Firefox 和不支持此功能的浏览器。
我不知道为什么你不能做到这一点，但有一点是安全风险，并且不允许你在任何浏览器做的，是编程设置HTML文件元素的文件名。
您可以在任何浏览器上触发 click() ，但某些浏览器需要元素可见并聚焦。这是一个 jQuery 示例：
$('#input_element').show();
$('#input_element').focus();
$('#input_element').click();
$('#input_element').hide();
它与之前的 hide 一起工作，click()但我不知道它是否可以在不调用 show 方法的情况下工作。从来没有在 Opera 上试过这个，我在 IE/FF/Safari/Chrome 上测试过，它可以工作。我希望这将有所帮助。
这是可能的：在 FF4+、Opera、Chrome 下：但是：
inputElement.click()应该从用户操作上下文中调用！（不是脚本执行上下文）<input type="file" />应该是可见的 (inputElement.style.display !== 'none') （你可以用可见性或其他东西隐藏它，但不是“显示”属性）
只需使用标签标签，这样您就可以隐藏输入，并通过其相关标签使其工作 https://developer.mozilla.org/fr/docs/Web/HTML/Element/Label
其它你可能感兴趣的问题