代码实现:
<!Doctype html>
<head>
<title>撸起袖子加油干</title>
<meta charset='utf-8'>
</head>
<script src="http://www.jq22.com/jquery/jquery-3.3.1.js"></script>
<style>
.disapper{
display:none;
}
</style>
<body>
<input type="file" name="file" id="file" accept="image/*" onchange="imgChange(this);"/>
<img id="img" src="" class='disapper' width="50" height="50" />
</body>
<script type="text/javascript">
//选择图片显示
function imgChange(obj) {
//获取点击的文本框
var file =document.getElementById("file");
var imgurl =window.URL.createObjectURL(file.files[0]);
var img =document.getElementById('img');
img.setAttribute('src',imgurl); // 修改img标签src属性值
$("img").removeClass('disapper');
};
</script>
</html>
效果图展示: