jquery 实现图片预览效果

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/JaRiS_jade/article/details/79375136

jquery 实现图片预览效果

CSS

.avatarWrapper:hover .avatarButton{
    display: block;
    cursor: pointer;
}
.avatarWrapper{
    position:relative;
    width: 250px;
    margin: 200px auto;
}
.avatarWrapper img{
    width: 250px;
    height: 250px;
}
.avatarButton{
    position:absolute;
    background-color:rgba(0, 0, 0, 0.5);
    top:230px;
    display: none;
    width: 250px;
    text-align: center;
}
.avatarButton span{

    color: #c5c2c2;
}

HTML

<div class="avatarWrapper">
    <img class="form-control" src="https://wx.qlogo.cn/mmopen/vi_32/PMxC3hj0bIzEKrNm15V9vcIAZhRtLiccI1p4HHicOjNHYo7iaYaBsI6AGfx9OiaPOSGRoIbIiajFUYF7xibibkbeyRSmQ/0" />
    <div id="avatarButton" class="avatarButton">
        <span>编辑图像</span>
    </div>
    <input type="file" name="avatar" id="editAvatar" accept="image/*" style="display:none;" />
</div>

Jquery

$('#avatarButton').on('click', function() {
    $('#editAvatar').click();
});

$('#editAvatar').on('change', function() {
    var reader = new FileReader();//创建一个文件读取对象
    reader.onload = function(e) {//图像读取完成后显示图像
        $('.avatarWrapper img').attr('src', e.target.result);
    }
    reader.readAsDataURL($(this).get(0).files[0]);//读取图像文件
});

代码结果呈现：