从按钮引发 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>

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

Answer 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

希望这可以帮助！