Как с помощью jQuery вывести имя загружаемого файла?

#javascript #jquery

В данном скрипте на javascript сделан скрипт который выводит полный путь файла. Как
исправить чтобы показывало только название файла?
    

Ответы

Ответ 1

у инпутов с типом file есть коллекция выбранных файлов, в ней сохраняются объекты
типа File, у которого есть поле name, в котором содержится имя выбранного файла.



document.getElementsByTagName('input')[0].onchange = function() {
  if (this.files[0]) // если выбрали файл
    document.getElementsByTagName('div')[0].innerHTML = this.files[0].name;
};




Ответ 2

Смотрим ответ от @Grundy.




JavaScript



document.querySelector('input').addEventListener('change', function() {
  var splittedFakePath = this.value.split('\\');
  document.querySelector('div').textContent =
    splittedFakePath[splittedFakePath.length - 1];
});






https://jsfiddle.net/xfynp30o/



jQuery



$('input').on('change', function() {
  var splittedFakePath = this.value.split('\\');
  $('div').text(splittedFakePath[splittedFakePath.length - 1]);
});







https://jsfiddle.net/pxk8x599/



Вариант с регулярными выражениями

Можно добавить проблем и сделать это с помощью регулярных выражений:



document.querySelector('input').addEventListener('change', function() {
  document.querySelector('div').textContent =
    this.value.replace(/.*\\(.+)/, '$1');
});






https://jsfiddle.net/bvk7xcw4/