Как изменить текст кнопки <input type="file"> в HTML

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

Для того, чтобы настроить текст в поле выбора файла, создайте ярлык, оформленный как кнопка, и сделайте элемент <input> невидимым. Назначьте этому ярлыку обработчик кликов, который инициирует выбор файла. Так выглядит пример кода для реализации:

<style>
  .file-input-container {
    overflow: hidden;
    position: relative;
  }
  
  .file-input-label {
    background: #f0f0f0;
    padding: 8px 15px;
    cursor: pointer;
    border-radius: 5px;
    border: 1px solid #d3d3d3;
  }
  
  .file-input {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    position: absolute;
    z-index: -1;
  }
</style>

<div class="file-input-container">
  <label class="file-input-label" for="file-upload">Загрузить файл</label>
  <input id="file-upload" class="file-input" type="file">
</div>

Для адаптации к дизайну вашего проекта редактируйте текст и стиль элемента .file-input-label. Теперь кнопка загрузки файла выглядит более привлекательно!

Расширение функциональности с помощью jQuery и плагинов

Чтобы обогатить стандартные возможности и обеспечить лучшую совместимость с различными браузерами, можно использовать плагин Bootstrap FileStyle. Добавьте файл bootstrap-filestyle.min.js к вашему проекту и примените jQuery для кастомизации стилей кнопок выбора файла:

$(":file").filestyle({text: "Выберите файл"});

Этот плагин также предоставляет data-атрибуты для детальной настройки внешнего вида и улучшения пользовательского опыта.

Усовершенствование стиля с использованием CSS и JavaScript

Детальная настройка с помощью CSS

Воспользуйтесь псевдоэлементом ::before в CSS для создания уникального дизайна элемента ввода и скрытия стандартного. Меняйте текст кнопки через свойство content:

.custom-input::before {
  content: 'Выберите файл';
  display: inline-block;
  background: #f0f0f0;
  /* Добавьте сюда стили по своему вкусу */
}

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

JavaScript: Связующее звено

Для сохранения функциональности после стилизации кнопки, соедините её со скрытым полем ввода, используя событие onclick в JavaScript:

document.querySelector('.custom-file-button').onclick = function() {
  document.querySelector('#hidden-file-input').click();
};

Определение ярлыка с уникальным идентификатором для поля ввода файлов обеспечивает доступность и повышает уровень пользовательского опыта.

Стратегии поддержания совместимости с различными браузерами

Работа со старыми версиями браузеров

Для обеспечения поддержки старых версий браузеров, таких как IE9 и IE10, примените резервные способы вызова клика на скрытом поле выбора файла с помощью jQuery, или используйте решение на базе Flash, например, Swfupload для реализации перенастройки текста кнопки.

Кросс-браузерное тестирование атрибута 'accept'

Для обеспечения единого представления доступных для выбора типов файлов, проведите тестирование атрибута accept в разных браузерах, особенно при использовании пользовательских стилей и плагинов.

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

Обычное использование <input type="file"> можно представить как продуктовый автомат с ярлыками, который по умолчанию предлагает "Выбрать файл".

Теперь давайте изменим это на "Загрузить документ". Оберните элемент input в тег label, сделайте его невидимым и настройте внешний вид:

<label for="file-upload" class="custom-file-upload">
    Загрузить документ
    <input id="file-upload" type="file" style="display:none;"/>
</label>

Так мы преобразуем продуктовый автомат:

🏷️ Стильная оболочка (настроенная): "Загрузить документ"

Вуаля! Мы стильно обновили стандартное сообщение!

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

1. MDN Web Docs: <input type="file"> — всеобъемлющий гид по элементу HTML для ввода файла и его атрибутам.
2. Создание кастомной кнопки выбора файла с помощью HTML и Javascript — пошаговое руководство по стилизации поля выбора файла для улучшения пользовательского опыта.
3. Использование HTML API Drag-and-Drop в React — подробное объяснение интеграции функциональности перетаскивания в поля выбора файла при использовании React.