將輸入類型=檔案替換為影像

Question

就像許多人一樣，我想自訂醜陋的 input type=file，並且我知道如果沒有一些 hack 和/或 javascript 就無法完成。但是，問題是，就我而言，上傳檔案按鈕僅用於上傳圖像（jpeg|jpg|png|gif），所以我想知道是否可以使用“clickable”圖像與輸入類型檔案完全相同（顯示對話框，並在提交的頁面上顯示相同的$_FILE）。

我在這裡找到了一些解決方法，這也很有趣（但不適用於 Chrome =/）。

當你想為文件按鈕添加一些樣式時，你們會怎麼做？如果您對此有任何觀點，請點擊回答按鈕;)

Answer 1

這對我來說非常有效：

.image-upload>input {
  display: none;
}

<div class="image-upload">
  <label for="file-input">
    <img src="https://icons.iconarchive.com/icons/dtafalonso/android-lollipop/128/Downloads-icon.png"/>
  </label>

  <input id="file-input" type="file" />
</div>

基本上，標籤的 for 屬性使得點擊標籤與點擊指定的輸入相同。

此外，將顯示屬性設為 none 可以使檔案輸入根本不呈現，從而將其隱藏得乾淨整潔。

在 Chrome 中進行了測試，但根據網絡，應該適用於所有主要瀏覽器。 :)

編輯： 此處新增了 JSFiddle： https://jsfiddle.net/c5s42vdz/