zoukankan      html  css  js  c++  java
  • 模拟input type=file

    表单中的input type=”file”在前端开发中经常会用到,但是很悲剧的是input type=”file”在各个浏览器下表现不统一,样式很难起作用;

    通常我的设计师是非常爱美的,如果真的要还原设计稿,只能通过文本框和按钮去模拟一个input type=”file”。

    HTML代码如下:

    <div class="type-file-box">
    <form action="" method="post" name="form1" id="form1">
    <input name="fileField" type="file" id="fileField" size="28" />

    </form>
    </div>

    这是一个基本的input type=”file”。当然这里你可能没看到文本框和按钮的代码,我们可以在后面的js中将文本框和按钮追加到html中。

    注意:size=”28″是在firefox下input type=”file”的宽高是不能通过样式来定义的,所以用了size属性来控制input type=”file”的宽度

    CSS代码如下:

    .type-file-box {
        position:relative;
        260px
    }
    input {
        vertical-align:middle;
        margin:0;
        padding:0
    }
    .type-file-text {
        height:22px;
        border:1px solid #cdcdcd;
        180px;
    }
    .type-file-button {
        background-color:#FFF;
        border:1px solid #CDCDCD;
        height:24px;
        70px;
    }
    .type-file-file {
        position:absolute;
        top:0;
        right:0;
        height:24px;
    filter:alpha(opacity:0);
        opacity: 0;
        260px
    }

     
    注意:这里的filter:alpha(opacity:0);opacity: 0是让input type=”file”全透明,这样用户看不到input type=”file”。层级在文本框和按钮之上。这样用户在点击按钮的时侯实际上点击的input type=”file”;
    js代码:
    $(function () {
        var textButton = "<input type='text' name='textfield' id='textfield' class='type-file-text' /> &nbsp;<input type='submit' name='button' id='button' value='浏览...' class='type-file-button' />"
        $(textButton).insertBefore("#fileField");
        $("#fileField").change(function () {
            $("#textfield").val($("#fileField").val());););
    这里用了jq当input type=”file”得值onchange的的时侯将文本框的值设置成input type=”file”的值,OK了

    声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
    转载请注明转自《模拟input type=file

     

  • 相关阅读:
    在Js或者cess后加版本号 防止浏览器缓存
    svn操作
    Hash表
    网站js埋点
    c#优秀文章
    CentOS修改默认yum源为国内yum镜像源
    mysql开启远程连接
    安装jdk环境
    Eclipse的一下设置
    好用的在线HTML、CSS工具
  • 原文地址:https://www.cnblogs.com/mofish/p/2095861.html
Copyright © 2011-2022 走看看