Изменение текста по умолчанию "No file chosen" в HTML

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

Желаете изменить стандартное обозначение "Файл не выбран"? Вы можете использовать комбинацию CSS и JavaScript для создания видимого пользовательского элемента управления, при этом скрывая оригинальный элемент ввода файла. Вот практический способ осуществления этого:

<style>
  .file-upload-wrapper { position: relative; overflow: hidden; }
  .file-upload-input { 
    opacity: 0; 
    width: 0.1px; 
    height: 0.1px; // незначительный размер, важность которого велика, как и у вашей первой программы
  }
  .file-upload-btn { 
    display: inline-block; 
    margin-right: 10px; // обеспечиваем кнопке дополнительное пространство
    border: 1px solid #ccc; 
    padding: 6px 20px; 
    border-radius: 4px; // округляем углы для эстетики
    cursor: pointer; 
    background-color: #f8f8f8; 
  }
  .file-upload-text { font-size: 16px; } // обеспечиваем тексту заслуженное внимание
</style>

<div class="file-upload-wrapper">
  <input id="file-upload" class="file-upload-input" type="file" onchange="updateLabel()">
  <label id="file-upload-label" for="file-upload" class="file-upload-btn">Выбрать файл</label>
  <span id="file-upload-text" class="file-upload-text">Файл не выбран</span>
</div>

<script>
  function updateLabel() {
    var fileName = ''; // инициализируем переменную; идеальный список ошибок — пустой список
    if (document.getElementById('file-upload').files.length > 0) {
      fileName = document.getElementById('file-upload').files[0].name;
    }
    document.getElementById('file-upload-text').textContent = fileName || 'Файл не выбран';
  }
</script>

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

Пошаговое руководство по настройке

Улучшение пользовательского опыта

Стремитесь сделать взаимодействие пользователя с сайтом таким же безупречным, как и ваш код? Внесите соответствующие изменения. Стилизуйте метку при помощи CSS таким образом, чтобы она гармонично вписывалась в дизайн вашего сайта. Для улучшения UX добавьте эффекты при наведении или плавные переходы. Используйте JavaScript для получения обратной связи при загрузке файла, чтобы пользователь видел немедленный результат своих действий.

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

Учет различий в браузерах

Убедитесь, что ваша реализация корректно функционирует во всех браузерах, выполнив соответствующее тестирование. Ведь мы разрабатываем не просто так, а для пользователей, которые могут пользоваться различным программным обеспечением для доступа к сети интернет.

Обработка нескольких файлов

Если для пользователя предусматривается возможность выбора нескольких файлов, не забудьте о атрибуте multiple. Настройте ваш JavaScript-код таким образом, чтобы он отображал имена всех выбранных файлов или выводил сообщение "Выбрано несколько файлов" в случае, если файлов больше одного.

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

Стандартный элемент ввода файла: простой и ненавязчивый.

До: 🎁💬 "В коробке пусто" 🚫

Добавим немного магии UX:

<input type="file" id="file-upload" hidden>
<label for="file-upload" class="btn">🎁📃 Выбрать файлы</label>

Теперь элемент ввода файла выглядит как приятный сюрприз:

После: 🎁💬 "📃 Выберите файлы и получите сюрприз" 😄

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

Советы для продвинутой настройки

Доступность прежде всего

Использование атрибута for обеспечивает доступность элемента ввода, что имеет критическое значение. for метки должен совпадать с id элемента ввода.

Расширенное взаимодействие с помощью JavaScript

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

Искусство CSS

Не ограничивайте себя в креативности при работе со стилями, но не забывайте о доступности. Используйте opacity: 0; вместо display: none; для скрытия поля ввода, при этом сохраняя его функциональность.

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

1. html – Стилизация кнопки input type="file" – Stack Overflow — советы и рекомендации сообщества по стилизации кнопок для ввода файлов.
2. Чтение файлов в JavaScript | Статьи | web.dev — подробное руководство по работе с файловым вводом при помощи JavaScript.
3. MDN Web Docs – руководство по элементу <input type="file"> — официальная документация по элементу <input type="file">.