input file图片预览效果
<a href="#" class="file_bg" >
<img src="image/file_bg.jpg"id="file_bg"/><input type="file"id="file" onchange="c()"/>
</a>
.file_bg{
display:inline-block;
width: 100px;
height: 70px;
overflow: hidden;
position: relative;
}
.file_bg img{
width: 100px;
height: 70px;
}
.file_bg input[type=file]{
position: absolute;top: 0;left: 0;
width: 100px;
opacity: 0;
height:70px;
}
<script type="text/javascript">
function c () {
var r= new FileReader();
f=document.getElementById('file').files[0];
r.readAsDataURL(f);
r.onload=function (e) {
document.getElementById('show').src=this.result;
};
}
</script>
