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

1226

24 ноября 2016, 09:52

<script type="text/javascript"> 
window.onload = function(){ 
    document.getElementsByTagName('input')[0].onchange = function(){ 
        document.getElementsByTagName('div')[0].innerHTML = this.value; 
    }; 
}; 
</script> 
 
<input type="file" /> 
<div></div>

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

Answer 1

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

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

<input type="file" /> 
<div></div>

Answer 2

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

JavaScript

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

<input type="file"> 
<div></div>

https://jsfiddle.net/xfynp30o/

jQuery

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<input type="file"> 
<div></div>

https://jsfiddle.net/pxk8x599/

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

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

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

<input type="file"> 
<div></div>

https://jsfiddle.net/bvk7xcw4/

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

двойной клик android

здравствуйте, как реализовать двойной клик jquery, который бы работал в браузерах на мобильных устройствах?.

622

jQuery

Как правильно записать значение в value input'а?

Значит записываю я значение (value) инпату с помощью jQuery и визуально оно записывается (в поле появляется необходимое значение), только вот форма...

507

jQuery