Как получить имена всех выбранных файлов в input[multiple] на jQuery?
Когда я подготавливал статью на тему кроссбраузерной стилизации полей выбора файлов, то на одном из тематических форумов увидел, как один человек задался вопросом: «А как же получить имена всех выбранных файлов, если их больше одного?»
Честно говоря, я тоже озадачился этим вопросом, прочитал несколько статей на данную тему и нашел решение его проблемы.
Для реализации нам потребуется:
- функция «change», которая будет запускать наш «сборщик» после того, как все файлы выбраны;
- объект «files», чтобы получить количество выбранных файлов и их имена (все это мы сделаем с помощью цикла) и по окончании всей работы – вывести на экран список выбранных файлов.
Итак, весь код будет выглядеть следующим образом:
<script>
$(document).ready(function() {
$(".input_file").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); // Добавляем имена файлов в массив
}
$("#result").text(name_file.join(", ")); // Выводим список имен в id="result", разделенных запятой
});
});
</script>Здесь «.input_file» – это название вашего input[type="file"], «#result» – контейнер, куда необходимо вывести все имена выбранных файлов (по желанию .text можно заменить на .val – таким образом вставить результат в текстовое поле), ну а все остальное подробно прокомментировано, так что сложностей возникнуть не должно.
Сам по себе метод подойдет и для полей с одиночным выбором файлов.
