Стилизация элемента <input type=»file»> — это способ сделать загрузку файлов на вашем веб-сайте более привлекательной и интуитивно понятной для пользователей. Вместо стандартного внешнего вида кнопки «Обзор» можно создать настраиваемую кнопку, которая лучше впишется в дизайн вашего сайта.

Простая кнопка загрузки

Этот код создает кнопку «Обзор» с иконкой папки, которая принимает файлы от пользователя. После загрузки файла надпись и иконка на кнопке меняется на название загруженного файла.

Результат:

HTML:

<div class="file-input-container">
  <input type="file" id="fileInput" class="file-input" />
  <label for="fileInput" class="file-label">
    <img class="file-icon" src="./browse.svg" alt="Иконка папки" />
    <span class="file-text">Обзор..</span>
    <span class="file-name"></span>
  </label>
</div>

CSS:

.file-input-container {
  position: relative;
  display: inline-block;
}

.file-input {
  display: none;
}

.file-label {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
}

.file-label:hover {
  background-color: #2990ff;
}

.file-icon {
  width: 30px;
  margin-right: 3px;
}

JavaScript:

// Получение ссылок на элементы DOM с помощью их id и классов
const fileInput = document.getElementById("fileInput");
const fileLabel = document.querySelector(".file-label");
const fileIcon = document.querySelector(".file-icon");
const fileText = document.querySelector(".file-text");
const fileNameSpan = document.querySelector(".file-name");

// Добавление слушателя события 'change' к элементу fileInput, который срабатывает при выборе файла
fileInput.addEventListener("change", function () {
  // Проверка, выбран ли хотя бы один файл
  if (fileInput.files.length > 0) {
    // Если файл выбран, установите текст элемента fileNameSpan на имя выбранного файла
    fileNameSpan.textContent = fileInput.files[0].name;
    // Скройте элементы fileText и fileIcon, если они используются
    fileText.style.display = "none";
    fileIcon.style.display = "none";
  } else {
    // Если файл не выбран, очистите текст элемента fileNameSpan
    fileNameSpan.textContent = "";
    // Верните видимость элементам fileText, если они используются
    fileText.style.display = "inline";
  }
});

Кнопка загрузки и текстовое поле

Этот код создает кнопку «Обзор» и текстовое поле. После загрузки файла в текстовом поле появляется название файла.

Результат:

HTML:

<div class="file-input-container">
  <input type="text" class="file-name" />
  <input type="file" id="fileInput" class="file-input" />
  <label for="fileInput" class="file-label">
    <img class="file-icon" src="./browse.svg" alt="Иконка папки" />
    <span class="file-text">Обзор..</span>
  </label>
</div>

CSS:

.file-input-container {
  position: relative;
  display: flex;
  align-items: center;
}

.file-name {
  height: 100%;
  padding: 0 10px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px 0 0 5px; /* Закругление левых краев */
  min-width: 250px;
}

.file-input {
  display: none;
}

.file-label {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  background-color: #007bff;
  color: #fff;
  border-radius: 0 5px 5px 0; /* Закругление правых краев */
  cursor: pointer;
}

.file-label:hover {
  background-color: #2990ff;
}

.file-icon {
  width: 30px;
  margin-right: 3px;
}

JavaScript:

// Получение ссылок на элементы DOM с помощью их id и классов
const fileInput = document.getElementById("fileInput");
const fileLabel = document.querySelector(".file-label");
const fileIcon = document.querySelector(".file-icon");
const fileText = document.querySelector(".file-text");
const fileName = document.querySelector(".file-name");

// Добавление слушателя события 'change' к элементу fileInput, который срабатывает при выборе файла
fileInput.addEventListener("change", function () {
  // Проверка, выбран ли хотя бы один файл
  if (fileInput.files.length > 0) {
    // Если файл выбран, установите текст элемента fileName на имя выбранного файла
    fileName.value = fileInput.files[0].name;
  } else {
    // Если файл не выбран, очистите текст элемента fileName
    fileNameSpan.textContent = "";
  }
});