今天我们就玩一下怎么在我们的网页中像更改头像一样更换图片
效果图如下：
当点击左边的图片，就弹出选择框，可以选择想要的图片将原图替换，是不是很实用，接下来就看看怎么实现的吧
1、body部分
<body>
<div id="divimg">
<img src="1.png" id="imgview"/>
<input type="file" id="headimg" onchange="getimg(this)" multiple="multiple" capture="camera" accept="image/*" /><!--1.在标签上声明只接受图像multiple="multiple"capture="camera" accept="image/*"
-->
</div>
</body>2、style样式部分
<style>
#divimg{
border:1px solid #F00;
display:inline-block;
width:150px;
height:150px;
border-radius: 50%;
}
img{
width: 150px;
height: 150px;
border-radius: 50%;
}
#headimg{
display: inline-block;
float: left;
width: 150px;
height: 150px;
position: relative;
top: -150px;
opacity: 0;
border-radius: 50%;
}
</style>3、sj脚本部分
<script src="jquery-1.8.3.min.js"></script>
<script>
function getimg(obj){
var f=obj.files.item(0);//obj.files.item(0); 获取当前选中文件对象//3.构建文件解析器，读取文件
var freader=new FileReader();//创建文件读取器
freader.readAsDataURL(f);
//在图像加载完成时，进行复制
freader.onload=function(event){
var src=event.target.result;
$("#imgview").attr("src",src);
};
}
</script>最后就可以实现想要实现的图片替换了