Ինչպե՞ս կարելի է ձևավորել 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>

Այս մեթոդը ապահովում է ֆայլի բեռնում տարրի տեսքի լիակատար վերահսկողություն՝ միաժամանակ պահպանելով բրաուզերի ստանդարտ վարքագիծը։