как распечатать имя файла

Question

Я пытаюсь напечатать имя загружаемых файлов, но по какой-то причине он печатает только первый файл.

Сценарий позволяет загружать неограниченные файлы, и именно поэтому это массив файлов.

$(document).on('submit', 'form', function(e) { 
    e.preventDefault(); 

    var $form = $(this); 
    var act = 'add'; 

    var files = $form.find('.file-field').prop('files'); 
    var names = ""; 

    $.each(files,function(i, file){ 
     name = file.name; 
     alert(name); 
    }); 

}); 

HTML

<form class="form-horizontal" action='#' method="post" enctype="multipart/form-data"> 
    <input type='file' name='file[]' class=' form-control file-field multi' maxlength='2' accept="image/jpg,image/png,image/jpeg,image/gif" id="uploadFile0"/> 
    <button class="btn btn-primary submit" >SEND</button> 
</form> 

Answer 1

prop() возвращаемое значение свойства для первого элемента в наборе соответствующих элементов или установить одно или несколько свойств для каждого элемента.

Взятые из http://api.jquery.com/prop/

Так используйте each() перебирать объекты JQuery и делать все остальное, как же

$(document).on('submit', 'form', function(e) { 
 
    e.preventDefault(); 
 

 
    var $form = $(this); 
 
    var act = 'add'; 
 

 
    $form.find('.file-field').each(function() { 
 
    var files = $(this).prop('files'); 
 
    var names = ""; 
 
    $.each(files, function(i, file) { 
 
     var name = file.name; 
 
     alert(name); 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form class="form-horizontal" action='#' method="post" enctype="multipart/form-data"> 
 
    <input type='file' name='file[]' class=' form-control file-field multi' maxlength='2' accept="image/jpg,image/png,image/jpeg,image/gif" id="uploadFile0" /> 
 
<input type='file' name='file[]' class=' form-control file-field multi' maxlength='2' accept="image/jpg,image/png,image/jpeg,image/gif" id="uploadFile0" /> 
 
    <button class="btn btn-primary submit">SEND</button> 
 
</form>

Update: Вы можете упростить код

$(document).on('submit', 'form', function(e) { 
 
    e.preventDefault(); 
 
    var $form = $(this); 
 
    $form.find('.file-field').each(function() { 
 
    var name = this.files[0].name; 
 
    alert(name); 
 
    console.log(name); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form class="form-horizontal" action='#' method="post" enctype="multipart/form-data"> 
 
    <input type='file' name='file[]' class=' form-control file-field multi' maxlength='2' accept="image/jpg,image/png,image/jpeg,image/gif" id="uploadFile0" /> 
 
<input type='file' name='file[]' class=' form-control file-field multi' maxlength='2' accept="image/jpg,image/png,image/jpeg,image/gif" id="uploadFile0" /> 
 
    <button class="btn btn-primary submit">SEND</button> 
 
</form>