javascript - 处理程序在 "onchange"事件上不起作用

Question

在使用“输入文件”HTML5 元素选择图像后，我尝试在 DOM 中进行一些更改。因此，我向“onchange”事件添加了一个处理程序，但它不起作用!

<span class="btn-file" >
    Load and show alert 
    <input type="file" onchange="performSomeActions()"/>
</span>

假设这是函数:

function performSomeActions(){
    alert("lalala");
}

执行代码并选择文件后出现的错误是:

Uncaught ReferenceError: performSomeActions is not defined 

我以为我的事件名称可能是错误的，但是如果您用以下行替换输入定义，它就可以工作!

<input type="file" onchange="alert('alo');"/>

fiddle :http://jsfiddle.net/pvhaggrv/5/

提前致谢!

Answer 1

JSFiddle 不喜欢调用 html 中嵌入的 javascript。为了保持代码整洁，事件处理程序是通过 javascript 分配的。将您的 html 更改为:

<input type="file" id='fileInput'/>

然后在你的JS中

document.getElementById('fileInput').onchange = function() {
    performSomeActions();
}

工作 fiddle :http://jsfiddle.net/bmartinelle/rhbphvhu/