Bagaimana untuk Menyembunyikan Elemen Input Fail dan Menggantikannya dengan Butang 'Semak Imbas'?

Secara Bergaya Menyembunyikan Elemen Input Fail dengan Butang Semak Imbas

Kemunculan lalai <input type="file"> elemen termasuk medan teks yang memaparkan laluan fail yang dipilih. Walau bagaimanapun, untuk situasi seperti muat naik berbilang fail di mana laluan fail tidak dipaparkan, anda mungkin lebih suka antara muka yang lebih diperkemas dengan butang "Semak Imbas" yang kelihatan sahaja.

Untuk mencapai ini, anda boleh memanfaatkan CSS dan JavaScript:

<input type="file">

Coretan kod ini mencipta elemen input fail tersembunyi dengan ID "selectedFile" dan butang kelihatan berlabel "Semak imbas..." dengan pendengar acara onclick. Apabila butang diklik, peristiwa klik elemen input fail tersembunyi dicetuskan, membenarkan pemilihan fail tanpa medan teks yang boleh dilihat.

Sebagai contoh, jika anda menggunakan kod muat naik berbilang fail yang anda nyatakan daripada morningz.com , anda boleh menyepadukan teknik ini untuk meningkatkan antara muka pengguna:

<input type="file">

Dengan pengubahsuaian ini, halaman muat naik berbilang fail anda akan menampilkan hanya "Semak imbas..." butang, menawarkan pengalaman yang lebih mesra pengguna dan diperkemas.

Atas ialah kandungan terperinci Bagaimana untuk Menyembunyikan Elemen Input Fail dan Menggantikannya dengan Butang 'Semak Imbas'?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!