javascript - 从按钮引发 onchange 事件 html 输入文件

标签 javascript onchange

我想通过单击按钮引发输入文件类型的 onchange 事件:

例子:

<input id="File1" type="file" onchange="show(this)"  />
<input id="Button1" type="button" value="button" onclick="butclick()" />
<input id="Button2" type="button" value="button" onclick="document.getElementById('File1').onchange()" />
<input id="Button3" type="button" value="button" onclick="document.getElementById('Button1').onclick()" />

<script>
function butclick() {
    alert('yes');
}
</script>

我可以触发另一个按钮的点击事件,但不能触发输入文件的 onchange 事件。

最佳答案

我建议将所有 Javascript 代码写入脚本标签,以便将所有内容放在一个地方。

当元素(在您的情况下是输入类型文件)发生变化而不是通过单击另一个元素时,将触发“更改”事件

例如:

function handleFileInput() {
 console.log("change event of file input triggered.");   
}

document.getElementById("files").addEventListener("change", handleFileInput, true);

在此示例中,更改事件附加到文件输入,当用户选择文件时,将调度该事件。

你可以试试 jsfiddle 上的代码: http://jsfiddle.net/883LL/1/


但是如果你真的想通过点击按钮来发送事件,你可以尝试使用 dispatchEvent: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.dispatchEvent

希望这对您有所帮助!

关于javascript - 从按钮引发 onchange 事件 html 输入文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23468520/

相关文章:

javascript - 如何使用onchange根据选择的值显示不同的信息?

javascript - Onchange 事件在选择框中不起作用

javascript - Angular - 文件输入字段的更改检测仅工作一次

javascript - 如何使用按钮的 onchange 事件来运行所选按钮的 onclick 功能?

javascript - onchange javascript动态更改链接

javascript - 如何从信息窗口中删除信息(在 KmlLayer 上)

javascript - meteor 铁路由器 : Passing data between routes

javascript - jquery slider : how to separate two slider collection to act independently?

javascript - 如何减少代码中的冗余? [JS]

javascript - 链接到特定选项卡 Bootstrap