巧妙利用label标签实现input file上传文件自定义样式

 

　　提到上传文件，通常会想到用input file属性来实现，简单便捷，一行代码便可

　　

　   但input file原生提供的默认样式大多状况下都不符合需求，且在不一样浏览器上呈现的样式也不尽相同

　　

　  咱们每每须要为其自定义样式，而直接对input添加样式是一件麻烦的事，

　 由于input自己有默认的样式，咱们须要一一覆盖，而且一些样式咱们也没法覆盖，

　 好比你想把选择文件的字体颜色设置为和未选择任何文件的字体颜色同样，就没法实现

　 

 

　 之前遇到该问题时，我会新建一个div，给它添加相应样式，而后定位覆盖在原生input上面，

　这样的作法虽然略显笨拙，但好在可以实际解决问题

　 

　如今有一种更好的方法可替代上面方法，那就是使用label标签，

　用label标签的for属性关联到input文件输入框，点击label标签时会触发input文件输入框的点击，

   打开浏览文件的对话框，至关于点击了文件输入框，记得把input隐藏掉

<!-- 自定义样式 -->
        <label for="file-input">label</label>
        <input type="file" id="file-input"  style="display: none;" multiple="multiple" />

　 注：上面代码中的multiple属性表示上传文件时可多选，不加该属性默认只能选一个文件上传

　 参考原文