Gantikan jenis input=fail dengan imej

Question

Seperti kebanyakan orang, saya mahu menyesuaikan imej input type=file，并且我知道如果没有一些 hack 和/或 javascript 就无法完成。但是，问题是，就我而言，上传文件按钮仅用于上传图像（jpeg|jpg|png|gif），所以我想知道是否可以使用“clickable" hodoh sama seperti fail jenis input (menunjukkan dialog dan menunjukkan $_FILE yang sama pada halaman yang diserahkan).

Saya menemui beberapa penyelesaian di sini, yang juga menarik (tetapi tidak berfungsi dalam Chrome =/).

Apa yang anda lakukan apabila anda ingin menambah beberapa penggayaan pada butang fail? Jika anda mempunyai sebarang pendapat tentang perkara ini sila tekan butang jawapan ;)

Answer 1

Ini bagus untuk saya:

.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>

Pada asasnya, atribut for label menjadikan klik pada label sama seperti mengklik pada input yang ditentukan.

Selain itu, menetapkan sifat paparan kepada tiada membenarkan input fail tidak dipaparkan sama sekali, sekali gus menyembunyikannya dengan bersih.

Diuji dalam Chrome, tetapi menurut web, harus berfungsi dalam semua penyemak imbas utama. :)

Editor: JSFiddle ditambahkan di sini: https://jsfiddle.net/c5s42vdz/