写一个本地图片选择然后预览的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
#file_preview{
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div id="file_preview"></div>
<div id="file_preview_info"></div>
<form action="">
<input type="file" id="file_input" />
</form>
<script>
window.onload=function(){
var file_input=document.getElementById("file_input");
var preview=document.getElementById("file_preview");
var info=document.getElementById("file_preview_info");
file_input.addEventListener("change",function(){
console.log("change...");
file_preview.style.background="";
if(!file_input.value){
alert("没有选择文件");
}
var file_input=fileInput.files[0];
info.innerHTML='文件:'+file_input.name+'<br/>'+
'大小:'+file_input.size+'<br/>'+
'修改:'+file_input.lastModifiedDate;
alert("test");
if(file_input.type !== 'image/jpeg' && file_input.type !== 'image/jpg'){
alert("不是有效的图片文件");
return;
}
var reader=new FileReader();
reader.onload=function(e){
var data=e.target.result;
preview.style.background='url('+data+')';
}
reader.readAsDataURL(file_input);
});
}
</script>
</body>
</html>
获取标签是同通过var file_input=document.getElementById("file_input");
然后判断了一下file_input是否为空?
if(!file_input.value){
alert("没有选择文件");
}
没想到浏览器一直报错:test02.html:27 Uncaught TypeError: Cannot read property 'value' of undefined
最后把变量名file_input改为fileInput就测试通过了?
至今不明白这是为什么?