如何修改input file的默认样式

浏览器默认的input type=file 样式非常丑陋，相信大部分朋友有想过如何修改其样式。

我的思路是将input隐藏，然后使用js代码控制其点击事件。 

1. 第一步：写好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>

   

2. 然后使用jQuery给我们的img绑定点击事件就可以实现了

    $('.upload>input').trigger('click');

    

来看看效果