点击图片弹出文件选择框

摘要：

我觉得input file很丑。

 

HTML

<div>
　　<a class="btn_addPic" href="javascript:;">
　　　　<img src="img/Adding-Pictures_03.png"/>
　　　　<input class="filePrew" type="file">
　　</a>
</div>

 CSS

.btn_addPic{
    display: block; 
    position: relative; 
    overflow: hidden; 
    cursor: pointer; 
    text-align: center; 
}
.filePrew{ 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 76px; /*自行设置这个图片高度*/
    opacity: 0;
}

JS

<script type="text/javascript">
　　let smallPic = document.querySelector('.show-big-pic');
　　let bigPic = document.querySelector('.big-pic');
　　let bigImg = bigPic.querySelector('img');
　　smallPic.onclick = function(e) {
　　　　e.preventDefault();
　　　　bigImg.src = this.href;
　　　　bigPic.classList.add('active');
　　};
　　bigPic.onclick = function() {
　　　　if (bigPic.classList.contains('active')) {
　　　　　　bigPic.classList.remove('active');
　　　　　　bigImg.src = '';
　　　　}
　　};
</script>

 

 效果图