input type="file"在各個瀏覽器下的默認樣式，以及修改自定義樣式

 

一、<input type="file"/>在各個瀏覽器中的默認樣式：

系統	瀏覽器	樣式效果	點擊效果
mac	google		點擊按鈕和輸入框都可以打開文件夾
mac	firfox		點擊按鈕和輸入框都可以打開文件夾
mac	safari		點擊按鈕和輸入框都可以打開文件夾
win10	google		點擊按鈕和輸入框都可以打開文件夾
win10	firefox		點擊按鈕和輸入框都可以打開文件夾
win10	edge		點擊按鈕和輸入框都可以打開文件夾
win10	ie11		點擊按鈕和輸入框都可以打開文件夾
win10	ie11仿真ie10\9\8\7\5		點擊按鈕可以打開文件夾，輸入框不可以打開文件夾

 

 二、修改成自己的樣式

目標樣式如下：

 

上傳頭像

 

 

當上傳文件后，會在右側顯示文件名

 點擊，在新窗口打開演示版：www.jusctice.cn/u1 （基礎演示用，沒有做更多判斷容錯處理，所以別傳太大的文件）

 

具體代碼：

-- css --

        .inputFileWrapper label{
            display: block;
            float: left;
            position: relative;
        }
        .inputFileWrapper input[type="file"]{
            position: absolute;
            width: 1px;
            height: 1px;
            clip:rect(0,0,0,0);
        }
        .inputFileWrapper .custorm-style{
            display: block;
            width: 390px;
            height: 50px;
        }
        .inputFileWrapper .custorm-style .left-button{
            width: 80px;
            line-height: 50px;
            background: #008ac7;
            color: #fff;
            display: block;
            text-align: center;
            float: left;
        }
        .inputFileWrapper .custorm-style .right-text{
            width: 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;
        }

 

 --html--

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

 

 

--js--

<script src="js/jquery-1.11.2-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>