Вывод списка файлов в теге li

Question

Ребята, всем привет. Подскажите пожалуйста с выводом. Ситуация такая, нужно сделать вывод загруженных файлов в теге li, то есть каждый загруженный файл выводиться в теге li, сейчас они выводятся через запятую. Буду благодарен за подсказку!

$("#files").change(function(){ // Выполняем функцию после выбора файлов
        
  var name_file = []; // Создаем массив

  for(var i = 0; i < $(this).get(0).files.length; ++i) { // Запускаем цикл и перебираем все файлы

    name_file.push($(this).get(0).files[i].name); // Добавляем имена файлов в массив

  } 

  $("#file-name").text(name_file.split(", ")); // Выводим список имен в id="file-name", разделенных запятой

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" id="files">
<ul id="file-name"></ul>

Answer 1

Что бы избавиться от запятой соедините элементы массива воспользовавшись методом join(""):

// $("#files").on("change", function() {
// const name_file = []
const name_file = ["Имя1", "Имя2", "Имя3"] // для примера
// for (let i = 0; i < $(this).get(0).files.length; ++i) {
//   name_file.push($(this).get(0).files[i].name)
// }
const elements = name_file.map(item => `<li>${item}</li>`)
$("#file-name").html(elements.join(""))
// })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" id="files">
<ul id="file-name"></ul>

Answer 2

input.onchange = function() {
    files.innerHTML = '';
    for (let i = 0; i < this.files.length; ++i) {
        const li = document.createElement('li');
        li.innerText = this.files[i].name;
        files.appendChild(li);
    }
}

<input type="file" id="input" multiple>
<ul id="files"></ul>

БЛОГ НА HUSL

Вывод списка файлов в теге li

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