Вывести названия файлов при загрузке

Question

Вот HTML

<div class="form--row">
     <div class="input_3">
         <label class="input__label">Файлы</label>
         <input class="input__file" id="attach-contact" type="file" name="attach-contact">
         <label class="input__file-label" for="attach-contact">прикрепить</label>
     </div>              
 </div>

 <div class="files_tags">
     <div class="file_tag">Название файла.дос<button type="button" class="del_tag"></button></div>
     <div class="file_tag">Название файла.дос<button type="button" class="del_tag"></button></div>
     <div class="file_tag">Название файла.дос<button type="button" class="del_tag"></button></div>
 </div>

Вот макет

Нужно чтобы в .files_tags выводились названия файлов при их выборе. Как это сделать?

Answer 1

Как вариант вот так:

// По одному файлу
document.querySelector('#attach-contact').addEventListener("change", (e) => addFile(e.target.files[0].name));

// Несколько файлов
document.querySelector('#attach-contact-multiple').addEventListener("change", (e) => Array.from(e.target.files).forEach(file => addFile(file.name)));


function addFile(fileName) {
  let div = document.createElement('div');
  div.className = "file_tag";
  div.innerHTML = fileName;
  let button = document.createElement('button');
  button.className = "del_tag";
  div.append(document.createElement('button'));
  document.querySelector('.files_tags').append(div);
}

<div class="form--row">
     <div class="input_3">
         <label class="input__label">Файлы</label>
         <input class="input__file" id="attach-contact" type="file" name="attach-contact">
         <label class="input__file-label" for="attach-contact">прикрепить</label>
     </div>              
 </div>
 

<div class="form--row">
     <div class="input_3">
         <label class="input__label">Несколько файлов</label>
         <input class="input__file"  id="attach-contact-multiple" type="file" name="attach-contact" multiple>
         <label class="input__file-label" for="attach-contact">прикрепить</label>
     </div>              
 </div>
 
  <div class="files_tags"></div>

БЛОГ НА HUSL

Вывести названия файлов при загрузке

Ответы (1 шт):