解决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>

posted @ 2016-04-28 10:02  ^cherish~  阅读(824)  评论(0编辑  收藏  举报