点击头像按钮实现图片上传并预览-蒲公英云

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

背景

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

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

效果预览

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

实现

step1 实现图片按钮

<div class="aui-info">
        <img src="imgs/txbk.png" id="img-txz" style="width: 3rem" class="aui-img-round user-img"/>
        <input type="file" accept="image/*" id="file-txz" name="file" onchange="upload('#file-txz', '#img-txz');"  class="fileInput"  value="" />
   </div>

css样式

图片和input按钮的div一定是relative或者absolute
input按钮 opacity: 0;设置透明，隐藏效果

设置头像和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传入参数即可。

<script type="text/javascript">
    var upload = function (c, d) {
        "use strict";
        var $c = document.querySelector(c),
            $d = document.querySelector(d),
            file = $c.files[0],
            reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (e) {
            $d.setAttribute("src", e.target.result);
        };
    };
</script>