背景
手机添加通讯录时,希望实现点击图片上传头像,这里主要包含两个功能
- 将上传图片的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>
结语
以上是思路,具体头像的圆形效果和位置,这个大家自己按照自己的方式实现即可。重点是原理,以后按照这个方法可以实现任何场景下,点击图片上传文件并预览的功能。