版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u014236259/article/details/78409550
注意：以下代码只适用于chrome、Firefox和IE10以上
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Js实现input上传图片时显示缩略图</title>
</head>
<input type="file" id="imgFile" /><br /><br />
<img src="" height="50" />
<body>
</body>
</html>
<script>
document.getElementById('imgFile').onchange = function(){
var preview = document.querySelector("img");
var file = document.querySelector("input[type=file]").files[0];
var reader = new FileReader();
if(file){
reader.readAsDataURL(file);
}else{
preview.src = '';
}
reader.onloadend = function(){
preview.src = reader.result;
}
}
</script>