HTML页面上传图片直接预览

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上传图片</title>
</head>
<body>
<div class="yanzRight">
<input name="evidence" οnchange="uploadImg(this,'preview')" type="file"/>
<span class="dui" id="imgOrder_dui" style="display: none;"></span>
</div>
<div id="preview">
<img src="" alt="" id="imghead5" height="200" width="200" />
</div>

</body>

<script>
function uploadImg(file,imgNum){
var widthImg = 200; //显示图片的width
var heightImg = 200; //显示图片的height
var div = document.getElementById(imgNum);
if (file.files && file.files[0]){
div.innerHTML ='<img id="upImg">'; //生成图片
var img = document.getElementById('upImg'); //获得用户上传的图片节点
img.onload = function(){
img.width = widthImg;
img.height = heightImg;
}
var reader = new FileReader(); //判断图片是否加载完毕
reader.onload = function(evt){
if(reader.readyState === 2){ //加载完毕后赋值
img.src = evt.target.result;
}
}
reader.readAsDataURL(file.files[0]); 
}
}
</script>
</html>

发布了32 篇原创文章 · 获赞 11 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/chengsw1993/article/details/84029445