zoukankan      html  css  js  c++  java
  • 解决ie10及其以下不兼容input type=file的问题

      

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Title</title>

     

    <style type="text/css">

        .file-input-wrapper {

            height: 40px;

            margin: 2px;

            overflow: hidden;

            position: relative;

            width: 118px;

            background-color: #fff;

            cursor: pointer;

        }

        .file-input-wrapper > input[type="file"] {

            font-size: 34px;

            position: absolute;

            top: 0;

            right: 0;

            opacity: 0;

    filter:alpha(opacity=0);

            cursor: pointer;

        }

        .file-input-wrapper > .btn-file-input {

            background-color: #494949;

            border-radius: 0;

            border: 0;

            color: #fff;

            display: inline-block;

            height: 40px;

            margin: 0 0 0 -1px;

            padding-left: 0;

            width: 121px;

            cursor: pointer;

        }

        .file-input-wrapper:hover > .btn-file-input {

        //background-color: #494949;

        }

    </style>

    </head>

    <body>

    <div class="file-input-wrapper">

        <button class="btn-file-input">SELECT FILES</button>

        <input type="file" name="image" id="image" value="" />

    </div>

              

    <script>

        (function($){

            $('input[type="file"]').bind('change',function(){

                $("#img_text").html($('input[type="file"]').val());

            });

        })(jQuery)

    </script>

    </body>

    </html>

  • 相关阅读:
    WebClien简单示例(一)
    关于WQS二分算法以及其一个细节证明
    Scut游戏服务器免费开源框架快速开发(1)
    Scut游戏服务器免费开源框架快速开发(3)
    Scut游戏服务器免费开源框架快速开发(2)
    Struts中的 saveToken的方法
    CKEditor 3.6
    Oracle 笔记 day01
    Oracle日期格式问题
    Oracle 笔记 day03
  • 原文地址:https://www.cnblogs.com/ln0218/p/5441547.html
Copyright © 2011-2022 走看看