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

Метод 1: JavaScript с прослушивателем событий

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

<label for="fileInput">Choose a File:</label>
<input type="file" id="fileInput" >
<button onclick="document.getElementById('fileInput').click()">Browse</button>
<p id="filename"></p>
<script>
  document.getElementById('fileInput').addEventListener('change', function() {
    var file = this.files[0];
    document.getElementById('filename').textContent = file ? file.name : '';
  });
</script>

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

Метод 2: чистый JavaScript с FileReader

Другой подход — использовать FileReader API для чтения имени выбранного файла. Вот пример:

<label for="fileInput">Choose a File:</label>
<input type="file" id="fileInput">
<p id="filename"></p>
<script>
  document.getElementById('fileInput').addEventListener('change', function() {
    var file = this.files[0];
    var reader = new FileReader();

    reader.onloadend = function() {
      document.getElementById('filename').textContent = file.name;
    };

    reader.readAsDataURL(file);
  });
</script>

В этом методе мы читаем выбранный файл с помощью FileReader API и устанавливаем обработчик событий onloadendдля обновления элемента абзаца filenameвыбранным именем файла.

Метод 3: подход jQuery

Если вы используете в своем проекте jQuery, вы можете добиться того же результата более кратким способом. Вот пример:

<label for="fileInput">Choose a File:</label>
<input type="file" id="fileInput">
<p id="filename"></p>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    $('#fileInput').on('change', function() {
      var file = this.files[0];
      $('#filename').text(file ? file.name : '');
    });
  });
</script>

В этом методе мы используем метод onиз jQuery для присоединения обработчика событий changeк элементу ввода файла. Затем выбранное имя файла обновляется в элементе абзаца filenameс использованием метода text.

Заключение

Теперь у вас есть три разных метода извлечения имени файла из входного тега с помощью специальной метки в HTML. Независимо от того, предпочитаете ли вы подход на чистом JavaScript или простоту jQuery, эти примеры помогут вам достичь желаемой функциональности. Не стесняйтесь выбирать метод, который лучше всего подходит для вашего проекта!