input的type为file类型时，按钮样式的处理

当input的type为file类型时，css是无法对input的文字及相关样式进行处理的，常见有两种方式来间接设置上传按钮的样式。

方法一、

1、增加用于设置按钮样式的元素

2、对input设置透明度为透明，并设为绝对定位且宽高等于新增按钮元素的宽高，可使点击区域覆盖按钮的区域，也使其浮于新增按钮元素的上方，在视觉上等同于点击我们设置的按钮。

该方法的优点是：简洁高效，无需新增JS代码来间接触发input

实例：

<li>
   <input 
        type="file" 
        class="upload" 
        @change="addImg" 
        ref="inputer" 
        multiple 
        accept="image/png,image/jpeg,image/gif,image/jpg"
   />
   <div class="add">
      <i class="iconfont icon-plus">+</i>
      <p>点击上传</p>
   </div>
</li>


 li{
   position: relative;
   width: 118px;
   height: 118px;
   font-size: 14px;
   display: inline-block;
   padding: 10px;
   margin-right: 25px;
   border: 1px dashed #aaa;
   text-align: center;
   vertical-align: middle;
   &:hover{
    cursor: pointer;
  }
 }
 li .upload{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 118px;
  height: 118px;
  opacity: 0;
  &:hover{
    cursor: pointer;
  }
}
 li:hover{
   border-color:#3594F4;
 }
 .add{
   display: block;
   background-color: #F8F8F8;
   color: #666;
   height: 94px;
   padding: 8px 0;
 }
 li:hover .add{
  background-color: #3594F4;
  color: #ffffff;
}
.add .iconfont{
  padding: 10px 0;
  font-size: 40px;
}

 

 

 

方法二、

通过点击按钮元素给input发送事件

使用的是dispatchEvent()方式

该方法的缺点是新增了本可以减少的JS代码，且兼容性可能存在问题

直接看实例：

<div class="container">
    <div class="add-img" @click="addImg">
        <i class="icon">+</i>
        <p class="add-tip">{{label}}</p>
    </div>
    <input type="file" class="inputer" ref="inputer">
</div>


methods:{
      addImg(){
        var ie = navigator.appName == "Microsoft Internet Explorer" ? true : false; 
        if(ie){
          this.$ref.click()
        }else{
          var e = document.createEvent("MouseEvents");
          e.initEvent("click", true, true);  
          this.$refs.inputer.dispatchEvent(e);
        }
    }
}


.container{
  position: relative;
  width:118px;
  height:118px;
  margin:20px auto;
  overflow: hidden;
  .add-img{
    width:118px;
    height:118px;
    border: 1px dashed #999;
    border-radius: 16px;
    background-color:#F8F8F8;
    &:hover{
      cursor: pointer;
    }
    .icon{
      font-size: 60px;
      line-height: 1.3
    }
  }
  .inputer{
    position: absolute;
    top:0;
    left:0;
    opacity: 0
  }
}