从按钮引发 onchange 事件 html 输入文件答案

【问题标题】：Raise onchange event html input file from button从按钮引发 onchange 事件 html 输入文件
【发布时间】：2014-06-21 12:31:00
【问题描述】：

我想通过点击按钮引发输入文件类型的 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 onchange

【解决方案1】：

我建议将所有 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

希望这会有所帮助！

【讨论】：

+1 用于使用 addEventListener 而不是内联 JS。
我不能通过按钮或 div 点击触发更改事件。这就是我想做的。谢谢