Файлдарды жүктөө үчүн input элементин кантип стилизациялоо керек?

Стандарттык <input type="file"> элементин стилизациялоо браузерлердин чектөөлөрү себептүү кыйын. Эң жакшы ыкма — стандарттык элементти жашырып, файл тандоо диалогун чакыруу үчүн башка элементти (мисалы, <label> же кнопка) колдонуу.

1. Стандарттык <input type="file"> элементин жашырыңыз:

.file-input {
  display: none; /* же visibility: hidden; height: 0; width: 0; жеткиликтүүлүк үчүн */
}

2. Стилдештирилген элементти (мисалы, <label>) түзүп, аны <input> менен for атрибуту аркылуу байланыштырыңыз:

<label for="upload-button" class="custom-upload-button">
  Файлды тандаңыз
</label>
<input type="file" id="upload-button" class="file-input">

3. Түзүлгөн элементти стилизациялаңыз:

.custom-upload-button {
  display: inline-block; /* же block */
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  font-family: sans-serif; /* Мисал */
  /* Кошумча стильдер керек болсо */
}

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

4. (Арзанда) тандалган файлдын атын көрсөтүңүз:

change окуясынын байкоочусу <input type="file"> үстүндө, тандалган файл тууралуу маалымат алууга жана анын атын көрсөтүүгө мүмкүндүк берет.

const fileInput = document.getElementById('upload-button');
const fileNameDisplay = document.getElementById('file-name'); // көрсөтүүчү элемент

fileInput.addEventListener('change', (event) => {
  const fileName = event.target.files[0]?.name || 'Файл тандалган жок';
  fileNameDisplay.textContent = fileName;
});

<span id="file-name">Файл тандалган жок</span>

Бул ыкма файл жүктөө элементинин көрүнүшүн толук көзөмөлдөөгө мүмкүндүк берет жана браузердин стандарттуу жүрүм-турумун сактайт.