利用jquery实现inpufile控件上传的图片在网页上显示

代码实现:

<!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>

效果图展示:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_42249896/article/details/85159482
今日推荐