使用file-selector-button美化原生文件上传

我正在参加「AdminJS·启航计划」

前言

你平时见到的上传文件是下面这样的？

还是下面这种美化过的button样式

还是下面这种复杂的上传组件。

<input type="file" >：只要指定的是type类型的input，打开浏览器就是上面第一种原生的浏览器默认的很丑的样式。

下面的两种是我从ElementUI截的图，ElementUI在实现这两种上传组件的时候，用的是下面的方法:

定义button负责样式，模拟上传按钮。定义一个默认隐藏的input负责打开选择文件的窗口。当点击按钮的时候，会自动调用input的click事件。

<div tabindex="0" class="el-upload el-upload--text">
    <button type="button" class="el-button el-button--primary el-button--small">
        <span>点击上传</span>
    </button>
    <input type="file" name="file" class="el-upload__input" />
</div>
<script>
    handleClick() {
  if (!this.disabled) {
     this.$refs.input.value = null;
     this.$refs.input.click();
  }
}
</script>
<style>
.el-upload__input {
    display: none;
}
</style>

当然如果你觉得麻烦还有下面这种实现方式：

隐藏文件选择输入框，然后使用 <label> 元素模拟上传按钮，此时点击<label>元素就会自动触发文件选择输入框的点击选择行为，从而呼出系统的文件选择框进行文件选择。这里主要是用到的label for只想input的id。

<input type="file" id="file" hidden>
<label for="file" class="zxx-button">上传文件</label>

当然上面这几种实现方式都十分的繁琐，需要引入额外的标签才可以。在这种背景下**::file-selector-button**应用而生，它主要是用来改变下图箭头所示的按钮。

语法

selector::file-selector-button { }

input[type="file"]::file-selector-button{ }

当然如果不指定任何元素，那么默认是改变全局的文件选择器的样式。

::file-selector-button{ }

兼容性

兼容性写法

/* Safari, Chrome, and Opera */
input[type="file"]::-webkit-file-upload-button {
  background-color: #f8a100;
}
/*IE*/ 
input[type="file"]::-ms-browse {
  background-color: #f8a100;
}
/* 标准写法 */
input[type="file"]::file-selector-button {
  background-color: #f8a100;
}

上传的按钮与影子DOM

影子 DOM（Shadow DOM）为封装而生。这个DOM不能在主文档中被任意访问，可能拥有局部样式规则，还有其他特性。这个 DOM 结构一般来说对我们是隐藏的，但我们可以在开发者工具里面看见它。比如，在 Chrome 里，我们需要打开「Show user agent shadow DOM」选项。

打开这个选项之后，我们再来查看我们的DOM结构，你会发现，在我们原本的DOM之前出现了一个button按钮。这也就是我们原生上传的按钮。

我们设置::file-selector-button，最终影响的就是这里面的button按钮

实例

HTML：

<input type="file">

CSS

::file-selector-button {
    height: 50px;
    font-size: 16px;
    line-height: 50px;
    color: #fff;
    border-radius: 5px;
    border: 1px solid #409eff;
    background-color: #409eff;
    font-family: inherit;
    cursor: pointer;
}

当然这里的【未选择任何文件】我们也是可以去掉的。比如说我们可以设置他的颜色为color: transparent;,在视觉上让他消失，但是实际还是占据空间的

或者你可以设计font-size:0;这样的话，就不占据空间了。