input file 文件上傳標簽的樣式美化


input file 文件上傳標簽的樣式美化

將<input type="file">的透明度設置為0:

1 <input type="file" class="filess" style="opacity: 0"/>

然后另外創建一個文本輸入框和一個點擊按鈕:

<input type="text" style="width: 350px" class="filetext"/>
<
button class="xiugaibtn">修改</button>

文本輸入框和按鈕的樣式隨需要設置好。

然后用js將按鈕點擊事件與文件上傳中的按鈕綁定:

 $(".xiugaibtn").click(function () {
            $(".filess").click();
        });

將文本輸入框與文件上傳中文本欄綁定,當文件位置顯示改變后,將路徑寫入文本輸入框中。

效果圖:

圖一:點擊打開文件地址選擇框

圖二:文件路徑顯示


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM