如何去掉 input type=file 的 “未选择任何文件”

比如有个需求,是点击一个按钮进行上传图片.

屏幕快照 2018-03-19 下午1.30.18.png

如何实现这个效果呢?

我的做法是 给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 就可以了.

但是 还有个烦人的效果很难搞; 就是鼠标放上去之后,会有个 未选择任何文件 的提示. 如图:

2427550893-5a335e478e8a1_articlex.png

那么这个如何处理呢?

请看代码:
<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;" 就可以了

大家可以去试试效果. 看看是不是完美解决.