Вывод имени и расширения файла отдельно с input file

Question

Ребят, всем привет. Подскажите с такой задачей. Есть список файлов, который выводиться в теге li, но обычно название файла длинное и необходимо сократить его с помощью text-overflow: ellipsis и получается что не видно конец файла, а именно расширение файла. Как сделать чтобы расширение файла показывалось отдельно от файла? Плюс к тому в самом имени файла выводилось только имя без расширения, а расширение отдельно. То есть имя в li, а расширение в span. Буду благодарен за помощь!

$("#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); // Добавляем имена файлов в массив

  } 
  const elements = name_file.map(item => `<li>${item}</li>`);
  $('#upload-file-list').html(elements.join(" ")) 

});

#upload-file-list li {
  max-width: 60px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form methond="get">
  <input type="file" id="files" class="upload-file" name="files[]" required multiple>
  <ul id="upload-file-list">

  </ul>
</form>

Answer 1

$("#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);
  }
  const elements = name_file.map(item => {
    var ind = item.lastIndexOf('.');
    return `<li>${item.substr(0, ind)}</li><span>${item.substr(ind + 1)}</span>`;
  });
  $('#upload-file-list').html(elements.join(" "))
});

span {
  font-weight: bold;
}

#upload-file-list li {
  max-width: 60px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form methond="get">
  <input type="file" id="files" class="upload-file" name="files[]" required multiple>
  <ul id="upload-file-list"></ul>
</form>

БЛОГ НА HUSL

Вывод имени и расширения файла отдельно с input file

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