input文件对象,选中后显示图片
<div class="headerdiv">
<label for="male">
<img id="himg" src="img/vipcard.png"/>
</label>
<input type="file" hidden="hidden" accept="image/jpg,image/png,image/gif, image/jpeg" name="male" id="male" value="" />
</div>
.headerdiv{
width: 100%;
height: 100%;
padding: 11px;
text-align: center;
}
.headerdiv>label{
width: 100%;
height: 100%;
}
.headerdiv>label>img{
width: 80%;
height: auto;
border-radius: 7px;
}
//监听文件改变 设置图片
$("input[name=male]").bind("change",function(){
console.log(this.files[0]);
$("#himg").attr("src",URL.createObjectURL($(this)[0].files[0]));
})
只要简单的几行代码,就可以将图片显示
如果感兴趣,也可以关注我的微信公众号,因为刚起步,所以只有几篇文章,之后会慢慢更新。