Gantikan jenis input=fail dengan imej
P粉567281015
P粉567281015 2023-10-13 13:47:35
0
1
724

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 ;)

P粉567281015
P粉567281015

membalas semua(1)
P粉158473780

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/

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan