input file文件上传_巧妙利用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属性表示上传文件时可多选，不加该属性默认只能选一个文件上传

参考原文