html input监听未选取,如何去掉 input type=file 的 “未选择任何文件”标志？

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

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

如何实现这个效果呢?

我的做法是 给input外层 裹上一层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

那么这个如何处理呢?

请看代码:

更换头像

我给input 的最外层裹了一个label. 类名与Input相同. 同时, 在Input中, 写上 style="

display:none;" 就可以了

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