比如有个需求,是点击一个按钮进行上传图片.
如何实现这个效果呢?
我的做法是 给input外层 裹上一层div
<div class="btn btn-lg btn-outline-primary change-photo">更换头像
<input class="change-photo-btn" type="file" accept="image/jpg,image/png,image/jpeg,image/bmp">
</div>
然后把div的样式 处理成button的一样. 那么重点来了, input的属性怎么写呢?
我是这么处理的
把外层div : { position: relative; }
input { position: absolute; top: 0; left: 0; opacity: 0; cursor: pointer; height: 40px; width: 88px; }
对 ,没错 ;就是 opacity 这只为零;
然后去写 change-photo-btn 的onchang事件. 去操作上传的file 就可以了.
但是 还有个烦人的效果很难搞; 就是鼠标放上去之后,会有个 未选择任何文件 的提示. 如图:
那么这个如何处理呢?
请看代码:
<div class="btn btn-lg btn-outline-primary change-photo">更换头像
<label class="change-photo-btn">
<input class="change-photo-btn" type="file" accept="image/jpg,image/png,image/jpeg,image/bmp" style="
display:none;">
</label>
</div>
我给input 的最外层裹了一个label. 类名与Input相同. 同时, 在Input中, 写上 style="
display:none;" 就可以了
大家可以去试试效果. 看看是不是完美解决.
