点击头像按钮实现图片上传并预览

淡淡的烟草味﹌ 2021-12-11 23:29 904阅读 0赞

## 背景 ##

手机添加通讯录时，希望实现点击图片上传头像，这里主要包含两个功能

1.  将上传图片的input按钮替换为指定图片，点击图片是触发input的上传事件。
2.  图片上传后预览。

## 效果预览 ##

点击  
![在这里插入图片描述][20190709194714588.png]  
点击灰色头像，打开相机或者相册。上传完后效果如下  
![在这里插入图片描述][20190709194757272.png]

## 实现 ##

### step1 实现图片按钮 ###

css样式

1.  图片和input按钮的div一定是relative或者absolute
2.  input按钮 opacity: 0;设置透明，隐藏效果
3.  设置头像和input按钮的位置，两者重叠后。点击图片即点击了按钮。  
    最终目的是让input绝对定位到和图片重合的位置，input按钮设置为和图片一样的大小。这样就实现了点击图片是点击按钮的功能。

.aui-info {
        position: relative;
    }
    
     .fileInput{
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                opacity: 0;
                display: block;
                width: 3.5rem;
                clear: both;
                display: block;
                margin: auto;
                background-color: red;
            }

### step2 实现图片上传后预览 ###

html部分同上，当图片上传后input的value改变，这时触发upload的函数。按照我的demo传入参数即可。

## 结语 ##

以上是思路，具体头像的圆形效果和位置，这个大家自己按照自己的方式实现即可。重点是原理，以后按照这个方法可以实现任何场景下，点击图片上传文件并预览的功能。

[20190709194714588.png]: /images/20211211/860ba8b2128c4dcfacb343ea33f75231.png
[20190709194757272.png]: /images/20211211/5a1be1a396f04c019e0224287559f1a2.png