zoukankan      html  css  js  c++  java
  • 定义file input

    <div class="inputFileWrapper">
             <label for="inputFile">
                 <input type="file" id="inputFile"/>
                <span class="custorm-style">
                 <span class="left-button">上传头像</span>
                 <span class="right-text" id="rightText"></span>
                </span>
             </label>
        </div>
    
     .inputFileWrapper label{
                display: block;
                float: left;
                position: relative;
            }
            .inputFileWrapper input[type="file"]{
                position: absolute;
                 1px;
                height: 1px;
                clip:rect(0,0,0,0);
            }
            .inputFileWrapper .custorm-style{
                display: block;
                 390px;
                height: 50px;
            }
            .inputFileWrapper .custorm-style .left-button{
                 80px;
                line-height: 50px;
                background: #008ac7;
                color: #fff;
                display: block;
                text-align: center;
                float: left;
            }
            .inputFileWrapper .custorm-style .right-text{
                 300px;
                height: 40px;
                line-height: 50px;
                display: block;
                float: right;
                padding: 4px;
                border: 1px solid #008ac7;
                overflow: hidden;
                -ms-text-overflow: ellipsis;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
    
    <script src="js/jquery-1.11.1.min.js"></script>
    <script>
             var fileBtn = $("input[type=file]");
             fileBtn.on("change", function(){
                     var index = $(this).val().lastIndexOf("\");
                     var sFileName = $(this).val().substr((index+1));
                     $("#rightText").html(sFileName);
                 });
    </script>
    

    示例:

    自定义input file 的样式,

    //.val()取的值是d:/userAdmin/uploads/20120515_115146.jpg; .lastIndexOf("\")从零开始,最后一个\的位置,所以下面要+1

    //substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符,.substr(start,length)
  • 相关阅读:
    二次离线莫队
    串串题-各种算法的应用
    插头dp 笔记
    ST03模拟赛#1 比赛记录
    AtCoder Regular Contest 123 比赛记录(vp)
    冷门trick:线性区间单调求和
    dp优化瞎吹
    概率期望
    NOI挑战赛#2 (vp) 记录
    动态规划-线性dp-序列组成-5833. 统计特殊子序列的数目
  • 原文地址:https://www.cnblogs.com/wangxue420/p/6264281.html
Copyright © 2011-2022 走看看