Kā var stilizēt input elementu failu augšupielādei…

Standarta <input type="file"> stila ir pielāgošana ir grūta, ņemot vērā pārlūkprogrammu ierobežojumus. Labākais risinājums ir slēpt standarta elementu un izmantot citu elementu (piemēram, <label> vai pogu), lai izsauktu faila izvēles dialogu.

Slēpt standarta <input type="file">:

.file-input {
  display: none; /* Vai visibility: hidden; height: 0; width: 0; pieejamībai */
}

Izveidot stilizētu elementu (piemēram, <label>) un sasaistīt to ar <input> ar for atribūtu:

<label for="upload-button" class="custom-upload-button">
  Izvēlēties failu
</label>
<input type="file" id="upload-button" class="file-input">

Stilizēt izveidoto elementu:

.custom-upload-button {
  display: inline-block; /* Vai block */
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  font-family: sans-serif; /* Piemērs */
  /* Papildu stili pēc nepieciešamības */
}

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

(Neobligāti) Parādīt izvēlētā faila nosaukumu:

change notikuma klausītājs uz <input type="file"> ļauj iegūt informāciju par izvēlēto failu un parādīt tā nosaukumu citur.

const fileInput = document.getElementById('upload-button');
const fileNameDisplay = document.getElementById('file-name'); // Rādītājs

fileInput.addEventListener('change', (event) => {
  const fileName = event.target.files[0]?.name || 'Fails nav izvēlēts';
  fileNameDisplay.textContent = fileName;
});

<span id="file-name">Fails nav izvēlēts</span>

Šī metode nodrošina pilnīgu kontroli pār faila augšupielādes elementa izskatu, saglabājot pārlūkprogrammas standarta uzvedību.

Kā var stilizēt input elementu failu augšupielādei?