როგორ შეიძლება სტილიზაცია შევიდეს 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>

ეს მეთოდი უზრუნველყოფს ფაილის ატვირთვის ელემენტის სრულ კონტროლს ვიზუალზე, ამავდროულად შენარჩუნებული აქვს ბრაუზერის სტანდარტული ქცევა.