Как настроить кнопку и текст в input type='file' в HTML

Быстрый ответ

Для того чтобы поменять стандартный текст в элементе input[type="file"], сперва сделайте сам элемент невидимым с помощью CSS, а затем прикрепите к нему свою кнопку, которая будет активировать выбор файла. Вот пример кода:

<style>
  #file-upload { 
    display: none;
  }
</style>
<input type="file" id="file-upload"/>
<button onclick="document.getElementById('file-upload').click()">Загрузить файл</button>

В данном примере input находится в скрытом состоянии, а функцию кнопки для выбора файла исполняет стилизованный элемент button. Кликнув по кнопке, вы вызываете нажатие на скрытый элемент input.

Практическое руководство по настройке элемента для выбора файла

Шаг 1: Использование мощи метки

Используйте связку label и input с атрибутом for, чтобы улучшить доступность элемента:

<label for="file-upload" class="custom-file-upload">
  Нажмите сюда!
</label>
<input type="file" id="file-upload" style="visibility:hidden;"/>

Подробнее об этом расскажет наш спикер на видео

Шаг 2: Превращение в мастеров CSS

Стилизуйте label как кнопку с помощью CSS:

.custom-file-upload {
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 4px;
}

Шаг 3: Усиление за счет JavaScript

Добавьте JavaScript для отображения имени выбранного файла. Это позволит пользователю увидеть, что файл был загружен:

document.getElementById('file-upload').onchange = function(e) {
  document.querySelector('.custom-file-upload').innerText = e.target.files[0].name || 'Нажмите сюда!';
};

Шаг 4: Фреймворки – наши друзья

Используйте такие фреймворки, как Bootstrap и Ratchet, чтобы обеспечить стабильное отображение элементов в различных браузерах и на разных устройствах.

Визуализация

Предположим, вы хотите заменить стандартную надпись "Выбрать файл" на "Загрузить изображение":

Стандартная надпись: 
🏪 "Выбрать файл" 🔳

Желаемый результат:
🏪 "Загрузить изображение" 🖼️

Скрыв оригинальный элемент и стилизовав label, вы достигаете желаемого результата:

input[type="file"] {
  visibility: hidden;
}
.custom-file-upload {
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
}

И вот ваша метка, выглядящая как кнопка:

<label class="custom-file-upload">
  🏪 "Загрузить изображение" 🖼️ <input type="file"/>
</label>

Таким образом, вы успешно обновили элемент управления! 🎨🖌️

Обращаем внимание на детали

Сохраняем удобство для пользователя

Стремитесь имитировать стандартное поведение input, чтобы пользователи сразу понимали, как работать с элементом.

Адаптируем под различные размеры экранов

Убедитесь, что ваша настраиваемая кнопка корректно смотрится и функционирует на всех устройствах.

Отображаем имена выбранных файлов

Применяйте JavaScript, чтобы пользователи видели имена загруженных файлов.

Гармонично вписываемся в общий дизайн

Приведите вашу настраиваемую кнопку в соответствие с общим стилем вашего приложения. Это создаст комфортный пользовательский опыт.

Полезные материалы

1. MDN Web Docs – <input type="file"> — подробная информация о виджете загрузки файлов в HTML.
2. html – Стилизация кнопки для input типа "file" – Stack Overflow — обсуждение сообщества программистов на тему стилизации элемента выбора файла.
3. Дизайн элементов для выбора файлов с Bootstrap — руководство по созданию кнопок для выбора файлов с использованием Bootstrap.
4. Как создать функцию Drag-and-Drop для загрузки файлов на чистом JavaScript — Smashing Magazine — пошаговый урок по созданию интерфейса для загрузки файлов методом перетаскивания.
5. Чтение файлов в JavaScript — обзор возможностей HTML5 File API.
6. Учебник: Использование HTML5 File API — подробное руководство от DigitalOcean по работе с загрузкой файлов в HTML5.