DEMO

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');"/>

THE FIDDLE ：http://jsfiddle.net/pvhaggrv/5/

提前致谢！

Answer 1

DEMO

HTML：

<span class="btn-file" >
    Load and show alert 
    <input type="file" id="input">
</span>

<br/>
<img id="img"> </img>

SCRIPT：

function handleFiles() {
    alert("lol");
  var fileList = this.files; /* now you can work with the file list */
}
var inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);

来源：

Dynamically adding a change listener

Answer 2

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

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

然后在你的JS中

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

工作小提琴：http://jsfiddle.net/bmartinelle/rhbphvhu/

Answer 3

只需在身体标签结束之前将javascript函数放在body标签中，就像这样

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

</span>
<br/>
<img id="img"> </img>
<script>
     var performSomeActions=function(){
    alert("yyy");
}
</script>

see fiddle

Answer 4

你的小提琴不起作用，因为小提琴在匿名函数中执行你所有的javascript：

//<![CDATA[ 
window.onload=function(){
function performSomeActions(){
    alert("yyy");
}

}//]]>

因此，您的功能不在全球范围内，您的HTML无法看到它。

要使代码正常工作，您需要将功能直接包含在HEAD中，您可以通过更改左侧的复选框来完成此操作：http://jsfiddle.net/pvhaggrv/12/

但是，你不应该这样添加事件监听器，你应该使用像kougiland一样的addEventListener在他的回答中说。

在“onchange”事件上没有工作处理程序

4 个答案:

DEMO