Чӣ тавр метавон унсури input-ро барои боргирии файлҳо…

Тартиб додани стандартии <input type="file"> душвор аст, зеро маҳдудиятҳои браузерҳо мавҷуданд. Беҳтарин роҳ ин аст, ки унсури стандартиро пинҳон кунед ва унсури дигар (масалан, <label> ё тугма) барои даъват кардани диалоги интихоб кардани файл истифода баред.

Унсури стандартии <input type="file">-ро пинҳон кунед:

.file-input {
  display: none; /* Ё visibility: hidden; height: 0; width: 0; барои дастрасӣ */
}

Унсури стилӣ (масалан, <label>) созед ва онро бо <input> тавассути атрибути for пайваст кунед:

<label for="upload-button" class="custom-upload-button">
  Файлро интихоб кунед
</label>
<input type="file" id="upload-button" class="file-input">

Унсури сохташударо стилӣ кунед:

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

(Ихтиёрӣ) Номи файли интихобшударо нишон диҳед:

Гӯшкунандаи рӯйдод 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>

Ин усул назорати пурраро дар намуди унсури боркунии файл таъмин мекунад ва дар айни замон рафтори стандартии браузерро нигоҳ медорад.

Чӣ тавр метавон унсури input-ро барои боргирии файлҳо стиль кард?