0

При выборе определенного файла, содержимое тега input type="file" меняется на название этого файла.Подскажите, как с помощью JS(JQuery), заменить то, что находится в теге label, на название выбранного файла?

<input class="input-form-items file-input" type="file" name="file" id="file" />                   
<label class="input-label" for="file">Прикрепить фото/видео</label>

1 ответ 1

0

let input = document.querySelector("input");
let label = document.querySelector("label");

input.addEventListener("input", function(event) {
  label.innerHTML = event.target.files[0].name;
});
<input class="input-form-items file-input" type="file" name="file" id="file" />                   
<label class="input-label" for="file">Прикрепить фото/видео</label>

Тут еще будет уместно вспомнить о баге в хроме (до сих пор не пофикшенном), из-за которого при выводе event.target.files в консоль вам будет показываться, что объект пустой (то есть как будто ничего не выбрано). Приложу ссылку на более подробное описание, если найду. И я не помню, к сожалению, есть ли такая проблема с загрузкой одного файла, или это только касается полей с multiple. Но в любом случае, будьте осторожны.

1
  • 1
    Спасибо,работает. 21 апр 2019 в 10:20

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.