社区 › 其他语言 › input file美化

admin 发表于 2021-6-21 20:10:46

input file美化

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


上传图片后效果

Deom
html部分

<div class="upload-file">
      <input type="file" class="input-file" name="image" multiple="true">
      <span class="tip">点击上传图片</span>
</div>


css部分

.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{
      height: 100%;
      width: 100%;
      position: absolute; //设置为绝对定位，不会影响到其他元素
      top: 0;
      right: 0;
      opacity: 0;   //透明度为0
      filter: alpha(opacity=0);
      cursor: pointer;
    }


利用change方法设置文件名

<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.name;
      }else {
      tip.textContent = '已选择 ' + this.files.length + ' 个文件';
      }
    })
</script>

查看完整版本: input file美化