input[type='file']样式美化及实现图片预览

前言

　　上传图片是常见的需求，多使用input标签。本文主要介绍 input标签的样式美化 和 实现图片预览。

　　用到的知识点有：

　　　　1、input标签的使用

　　　　2、filelist对象 和 file对象

　　　　3、fileReader对象

样式美化

　　原生的input标签样式单一，且在不同浏览器下的表现还不一致。所以为了美观和统一，我们需要自定义input标签的样式。

　　实现的方式有很多中，这里采用的是：用一个div将input标签包裹，然后再将input标签透明度设置为0，再对div设置自己需要的样式。html和css如下：

      <div class="upload-file">
        <input type="file" class="input-file" multiple="true">  // mulitiple属性控制是否允许上传多个文件
        <span class="tip">点击上传图片</span>
      </div>

    .upload-file{
      position: relative;
      width: 100px;
      padding: 10px 15px;
      border: 1px solid rgb(119, 154, 80);
      border-radius: 5px;
      background-color: rgb(66, 215, 142);
      color: #333333;
      font-size: 14px;
      text-align: center;
      overflow: hidden;
    }

    .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;
    }

View Code