input[type=file]去掉「未選擇任何文件」及樣式改進

• 2019 年 11 月 13 日
• 筆記

input 標籤的 file 屬性，在沒有選擇文件的情況下，默認顯示一條文字「未選擇任何文件」。

在選擇文件後，該條文字會變成路徑和文件的名稱。

如何去掉其默認的「未選擇任何文件」提示呢？

查閱資料，沒有發現可以直接修改的辦法，但是我們可以通過其他方法，實現自定義提示文字的效果。

我通過 label 標籤綁定 input 標籤，然後隱藏 input ，添加 button 和 span 來自定義提示語：

HTML部分

<label for="fileinp">      <input type="button" id="btn" value="點我上傳"><span id="text">請上傳Word文檔</span>      <input type="file" id="fileinp">  </label>

CSS部分：

label{      position: relative;  }  #fileinp{      position: absolute;      left: 0;      top: 0;      opacity: 0;  }  #btn{      margin-right: 5px;  }  #text{      color: red;  }

效果如下：

如果要選擇文件後 提示語也跟著改變，可以用 jQuery 修改 span 標籤的內容。

input 發生變化時，span 的內容修改為 input 的 value 值，程式碼如下：

$("#fileinp").change(function () {      $("#text").html($("#fileinp").val());  })

效果如圖：

如果感覺按鈕比較丑，可以用CSS稍微調整一下：

#btn{      padding: 5px 10px;      background: #00b0f0;      color: #FFF;      border: none;      border-radius: 5px;  }

如下圖：