input file美化

admin

系统默认的input file样式确实很难看，今天将其进行了美化。相关的css样式分享如下：
首先看看效果咋样


上传图片后效果

Deom
html部分
[pre]
<div class="upload-file">
        <input type="file" class="input-file" name="image" multiple="true">  
        <span class="tip">点击上传图片</span>
  </div>

[/pre]
css部分
[pre]
.upload-file{
     position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
    }

    .upload-file span{ //单行显示
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    .upload-file:hover{ //简单的hover效果
      font-size: 15px;
      border-color: rgb(39, 226, 81);
    }

    .upload-file input[type='file']{
      height: 100%;
      width: 100%;
      position: absolute; //设置为绝对定位，不会影响到其他元素
      top: 0;
      right: 0;
      opacity: 0;   //透明度为0
      filter: alpha(opacity=0);
      cursor: pointer;
    }

[/pre]
利用change方法设置文件名
[pre]
<script>
    var fileInput = document.querySelector('.input-file');
    var tip = document.querySelector('.tip');
    fileInput.addEventListener('change',function(e){ //监听change事件，选择文件后触发
      if(this.files.length === 1){ //处理文件名
        tip.textContent = this.files[0].name;
      }else {
        tip.textContent = '已选择 ' + this.files.length + ' 个文件';
      }
    })
</script>

[/pre]