【原創】自定義input file ---工做總結

先上圖吧~

樣式OK，測試功能正常。

 

思路：

1. 隱藏系統本來的input file，使用css的opacity等屬性
2. 而後，提升input file的 z-inde 值
3. 給input file 作一個 onchange事件，將值傳給 input text 裏。
4. 在透明的整個input file區域 上面，作一個文本框和按鈕。

 技巧：

1. input file 雖然被透明，可是點擊上傳並不會消失；
2. 注意提高input file 的z-index值，不然，點擊上傳不會出來。

css以下：

/*自定義input-file上傳樣式*/
    .otoc-uploadfile-box{
        position: relative;
        width: 100%;
        height: 36px;
        box-sizing: content-box;
    }
    .otoc-uploadfile-box > input[type=file]{
        position: absolute;
        top: 0;
        left: 0;
        filter: alpha(opacity:0);
        opacity: 0;
        width: 100%;
        height: 36px;
        cursor: pointer;
        z-index: 2;
    }
    .otoc-uploadfile-box > input[type=text]{
        position: absolute;
        top: 0;
        left: 0;
        padding-left: 3px;
        width: 75%;
        height: 36px;
        border: 1px solid #ccc;
        z-index: 0;
    }
    .otoc-uploadfile-box > button[type=button]{
        position: absolute !important;
        top: 0;
        right: 0;
        width: 25%;
        height: 36px;
        z-index: 0;
        color: #fff;
        background-color: #36c6d3;
        border:1px solid  #2bb8c4;
        user-select:none;
    }

css以下： 

<div class="otoc-uploadfile-box">
                        <input type="file" id="stockUpload" onchange="document.getElementById('textfield').value=this.value">
                        <input type="text" id="textfield">
                        <button type="button">瀏覽文件</button>
                    </div>