• 文件上传控件,格式统一


    因为type="file" 控件在IE和Chrome中的展现方式不一致,现需要修改样式使其保持一致:

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title>文件上传按钮修改样式</title>
     6         <script src="jquery-1.10.2.js" type="text/javascript"></script>
     7         <style>
     8             .file {
     9             position: relative;
    10             display: inline-block;
    11             background: #D0EEFF;
    12             border: 1px solid #99D3F5;
    13             border-radius: 4px;
    14             padding: 4px 12px;
    15             overflow: hidden;
    16             color: #1E88C7;
    17             text-decoration: none;
    18             text-indent: 0;
    19             line-height: 20px;
    20         }
    21         .file input {
    22             position: absolute;
    23             font-size: 100px;
    24             right: 0;
    25             top: 0;
    26             opacity: 0;
    27         }
    28         .file:hover {
    29             background: #AADFFD;
    30             border-color: #78C3F3;
    31             color: #004974;
    32             text-decoration: none;
    33         }
    34         </style>
    35         <script type="text/javascript">
    36         $(function(){
    37             $('#ab').change(function(){
    38                 $('#showFileName').html($('#ab').val())
    39             });
    40         });
    41         </script>
    42     </head>
    43     <body>
    44     <table style=" 200px; margin: auto;" >
    45     <tr>
    46     <td width="100px" style="border-left-style: none; border-right-style: none; border-top-style: none; border-bottom-style: none">
    47         <div class="file-box">
    48             <a href="javascript:;" class="a-upload">
    49                 <input type="file" name="" id="">点击这里上传文件
    50             </a>
    51             </br>
    52             </br>
    53             </br>
    54             </br>
    55             </br>
    56             <a href="javascript:;" class="file">選擇需要的文件
    57                 <input type="file" name="" id="ab" title="">
    58             </a>
    59             <span id='showFileName' />
    60         </div>
    61                         </td>
    62         
    63         <td width="100px" style="border-left-style: none; border-right-style: none; border-top-style: none; border-bottom-style: none">
    64                             <span id='showFileName' style="display:inline-block;"></span>
    65                         </td>
    66     </tr>
    67     </table>
    68     </body>
    69 </html>

    效果图:

  • 相关阅读:
    使用方法GetPostBackEventReference 得到回发脚本
    超实用的Linux/Unix快捷键大汇总
    Http 之Get/Post请求区别
    使用ASP启动/停止指定WEB站点
    使用ASP在IIS创建WEB站点的函数
    CSS+JS 仿MSN TAB选项卡
    防止圖片在WEB頁面上下載
    asp定时生成静态HTML的代码
    jQuery Slide Show – jQuery幻灯片效果
    Debian 5.0.5 正式版
  • 原文地址:https://www.cnblogs.com/hpbkin/p/10516791.html
Copyright © 2020-2023  润新知