Как получить имя файла из типа input = file html с помощью JavaScript или JQuery?

В браузере Google Chrome я пробовал несколько вариантов +, и ничто не дает мне значение имени файла, которое было прикреплено, после проверки я отправлю файл. Но всегда его undefined или val() не найден..

Как его решить?

console.log($("input[name='attachment[]']"));
/* Output:
[
<input type="file" name="attachment[]" id="attachment">
, 
<input type="file" name="attachment[]" id="attachment">
, 
<input type="file" name="attachment[]" id="attachment">
]
*/

$.each($("input[name='attachment[]']"), function(i,v) {
    console.log(i);
    console.log(v); //v.val() does not exist... even uploaded a file and showing file

});

/* Output: 
0
<input type="file" name="attachment[]" id="attachment">
1
<input type="file" name="attachment[]" id="attachment">
2
<input type="file" name="attachment[]" id="attachment">
*/

return false;

Ответы

Ответ 1

Это должно работать:

$("input[name='attachment[]']").each(function() {
    var fileName = $(this).val().split('/').pop().split('\\').pop();
    console.log(fileName);
});

Вы не можете получить полный путь к файлу, потому что это зависит от используемого вами браузера. Единственное общее значение кросс-браузера для входного файла - это имя файла.

Ответ 2

Я бы предложил нечто похожее на следующее:

$('input:file').change(
    function(e){
        console.log(e.target.files[0].name);
    });

JS Fiddle demo.

Если вы разрешаете загружать несколько файлов, используя атрибут multiple, то для получения каждого из имен:

$('input:file').change(
    function(e){
        var f = e.target.files,
            len = f.length;
        for (var i=0;i<len;i++){
            console.log(f[i].name);
        }
    });

JS Fiddle demo.

ПРИМЕЧАНИЕ: в текущих версиях браузера f[i].fileName должен быть f[i].name.

Ответ 3

Элемент <input type=file> имеет нулевое индексирование FileList через его переменную-член files.

Вы можете получить доступ к этому списку с помощью селектора запросов:

document.querySelector('input[type=file]').files

И вы можете получить доступ к имени файла с помощью точечной нотации:

document.querySelector('input[type=file]').files[0].name

Следует отметить, что в Chrome 53, Firefox 49 и текущей спецификации W3C для FileAPI files является массивом, как список не фактический массив. Вы можете получить доступ к каждому файловому объекту через свой индекс, но у вас не будет доступа к каким-либо прототипам массива без предварительного преобразования списка в массив.

Ответ 4

для

<input type="file" mutiple onchange="getSongs(this.files)"/>

использование

function getSongs(files){
  ...
  for(var i = 0; i < files.length; i++){
     file=files[i];
     filename=file.fileName;
  }
}

если вход только для одного файла, просто используйте атрибут name

$("type=['file']").attr('name');