• input type='file'文件上传自定义样式


    使用场景:

    在未使用UI库时免不了会用到各种上传文件,那么默认的上传文件样式无法达到项目的要求,因此重写(修改)上传文件样式是必然的,下面的效果是最近项目中自己写的一个效果,写出来做个记录方便以后使用;

    默认效果及选择文件后效果:

    修改后的效果:

    以下是相应的代码:

    <!doctype html>
    <html>
    <head>
      <title></title>
    </head>
    <style type="text/css">
    .file{
      margin-top: 20px;
      margin-left: 20px;
    }
      .block {
        margin-bottom: 30px;
        margin-top: 20px;
        height: 30px;
        line-height: 30px;
      }
    
      .block span {
        display: inline-block;
        width: 100px;
        text-align: right;
        font-size: 14px;
        float: left;
        margin-right: 15px;
      }
    
      .block input {
        background: #363738;
        height: 30px;
        width: 300px;
        border: #363738;
        color: #ffffff;
        padding-left: 15px;
      }
    
      .block .block-label {
        width: 220px;
        height: 30px;
        background: #363738;
        margin: 0;
        float: left;
        padding-left: 15px;
        color: #fff;
      }
    
      /* 文件上传样式 */
    
      .btn_addPic {
        display: inline-block;
        position: relative;
        width: 80px;
        height: 30px;
        overflow: hidden;
        border: 1px solid #f9c100;
        background: #f9c100;
        color: #000;
        cursor: pointer;
        text-align: center;
        font-size: 14px;
      }
    
      .btn_addPic:hover {
        cursor: pointer;
      }
    
      .filePrew {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 140px;
        height: 39px;
        font-size: 100px;
        opacity: 0;
        filter: alpha(opacity=0);
        /* 兼容IE */
      }
    </style>
    
    <body>
      <div class="file">
        <input type="file" name="" id="">
        <input type="file" name="" id="">
      </div>
      <div class="block">
        <span>CAD图纸:</span>
        <label class="block-label" for="fileupload" id="label"></label>
        <a class="btn_addPic" href="javascript:void(0);" id="fileupload">
          选择
          <input class="filePrew" type="file" accept="images/*" id="upload" onchange="getFileSize(this.value)">
        </a>
      </div>
      <script>
        var card = document.getElementById('label');
        function getFileSize(v) {
          card.innerText = v;
          console.log(v)
        }
      </script>
    </body>
    
    </html>

    可直接复制粘贴查看效果!

    一分积累,一份收获,愿大家每天都有进步!

  • 相关阅读:
    数据分析05 /pandas的高级操作
    ABP之应用服务(2)
    ABP之应用服务(1)
    ABP之仓储
    ABP之创建实体
    ABP之框架体系
    ABP之项目的搭建
    2018年,加油!!!
    WF的简单使用
    WCF之通信工厂的简单使用
  • 原文地址:https://www.cnblogs.com/Joun-wang/p/9263770.html
走看看 - 开发者的网上家园