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(); });
將文本輸入框與文件上傳中文本欄綁定,當文件位置顯示改變后,將路徑寫入文本輸入框中。
效果圖:
圖一:點擊打開文件地址選擇框
圖二:文件路徑顯示