当我运行这段代码时。
<!DOCTYPE html>
<html>
<head>
<title>Upload Button</title>
</head>
<body>
<input type="file" accept="image/*" style="display:none" onchange="LoadFile(event)" id="file" name="image"/>
<label for="file" style="cursor:pointer">Upload image</label>
<br>
<img id="output" style="width:200px; height:200px;"/>
<script>
var loadFile = function(event) {
var image = document.getElementById("output");
image.src = URL.createObjectURL(event.target.files[0]);
};
</script>
</body>
</html>
浏览器出现了这个错误
Uncaught ReferenceError: LoadFile is not defined at HTMLInputElement.onchange (tp1.html:7)
它说这个函数 LoadFile()
没有被定义,我觉得这很奇怪,因为函数是被定义的。
解决方案:
JavaScript是区分大小写的。你应该调用 loadFile()
而不是 LoadFile()
在 onchange
. 这是你的代码
<html>
<head>
<title>Upload Button</title>
</head>
<body>
<input type="file" accept="image/*" style="display:none;" onchange="loadFile(event)" id="file" name="image"/>
<label for="file" style="cursor:pointer">Upload image</label>
<br>
<img id="output" style="width:200px; height:200px;"/>
<script>
var loadFile = function(event) {
var image = document.getElementById("output");
image.src = URL.createObjectURL(event.target.files[0]);
};
</script>
</body>
</html>
暂无讨论,说说你的看法吧