Fayllarni yuklash uchun input elementini qanday…

Standart <input type="file"> elementini styling qilish brauzer cheklovlari sababli qiyin. Eng yaxshi yondashuv — standart elementni yashirish va fayl tanlash dialogini chaqirish uchun boshqa elementdan (masalan, <label> yoki tugma) foydalanish.

Standart <input type="file"> ni yashirish:

.file-input {
  display: none; /* Yoki accessibility uchun visibility: hidden; height: 0; width: 0; */
}

Stilize qilingan element (masalan, <label>) yaratish va uni <input> bilan for atributi orqali bog‘lash:

<label for="upload-button" class="custom-upload-button">
  Fayl tanlang
</label>
<input type="file" id="upload-button" class="file-input">

Yaratilgan elementni stilize qilish:

.custom-upload-button {
  display: inline-block; /* Yoki block */
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  font-family: sans-serif; /* Misol uchun */
  /* Qo‘shimcha uslublar kerak bo‘lsa */
}

.custom-upload-button:hover {
  background-color: #0056b3;
}

(Ixtiyoriy) Tanlangan fayl nomini ko‘rsatish:

change voqea tinglovchisi <input type="file"> da fayl tanlanganidan so‘ng, fayl haqida ma’lumot olish va uning nomini ko‘rsatish imkonini beradi.

const fileInput = document.getElementById('upload-button');
const fileNameDisplay = document.getElementById('file-name'); // Ko‘rsatish uchun element

fileInput.addEventListener('change', (event) => {
  const fileName = event.target.files[0]?.name || 'Fayl tanlanmagan';
  fileNameDisplay.textContent = fileName;
});

<span id="file-name">Fayl tanlanmagan</span>

Ushbu usul fayl yuklash elementining tashqi ko‘rinishini to‘liq nazorat qilish imkonini beradi va brauzerning standart xulq-atvorini saqlab qoladi.

Fayllarni yuklash uchun input elementini qanday stiliz qilish mumkin?