浏览器默认的input type=file 样式非常丑陋,相信大部分朋友有想过如何修改其样式。
我的思路是将input隐藏,然后使用js代码控制其点击事件。
- 第一步:写好html结构和css结构
<div class="container"> <div class="content"> <div class="content-inner-item"> <div class="imgWrapper"> <img class="clsPhoto" src="img/XXX.jpg" alt=""/> <form class="upload" action="XXX" enctype="multipart/form-data" method="post"> <input type="file" name="fileToUpload" multiple/> <span class="fa fa-angle-down"></span> <button type="submit">上传</button> </form> </div> <span class="c_name">班级名字</span> </div> </div> </div>
-
然后使用jQuery给我们的img绑定点击事件就可以实现了
$('.upload>input').trigger('click');
来看看效果