从按钮触发onchange事件html输入文件

Question

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

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

Answer 1

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

当元素(在您的情况下输入类型文件)发生变化时触发"change"事件，而不是通过单击另一个元素

例如:

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

希望这对你有帮助!