Супербыстрый хостинг на SSD от 165р в месяц   •   Реклама
2 404 просм
9 комм
Поделиться:

Как получить имена всех выбранных файлов в input[multiple] на jQuery?

Когда я подготавливал статью на тему кроссбраузерной стилизации полей выбора файлов, то на одном из тематических форумов увидел, как один человек задался вопросом: «А как же получить имена всех выбранных файлов, если их больше одного?»

Честно говоря, я тоже озадачился этим вопросом, прочитал несколько статей на данную тему и нашел решение его проблемы.

Для реализации нам потребуется:

  1. функция «change», которая будет запускать наш «сборщик» после того, как все файлы выбраны;
  2. объект «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 – таким образом вставить результат в текстовое поле), ну а все остальное подробно прокомментировано, так что сложностей возникнуть не должно.

Сам по себе метод подойдет и для полей с одиночным выбором файлов.

9
комментариев
Гостям запрещено участвовать в обсуждениях сайта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
Гости  |  679

Все отлично работает! Большое спасибо :-)

22.05 в 21:30
  • 0
Администратор  |  722

Gh8st, Пробуйте - https://jsfiddle.net/4wrs8zL3/1/

22.05 в 21:19
  • 8
Гости  |  679

Сначала надо кликнуть по ссылке "Clear bbcode". Регулярка уберет все нужное, оставив только url картинки. Потом по событию click в textarea выводим в блоке изображение. Можно проще, если вставить прямую ссылку на изображение и кликнуть после этого по textarea.

22.05 в 19:41
  • 0
Администратор  |  722

Gh8st, возможно я плохо смотрю, но я не заметил где настроен вывод 1 изображения

22.05 в 18:08
  • 7
Гости  |  679

Первый вопрос решен :-) Спасибо.

Попробовал. Получилось вывести только первое изображение. Сможете помочь?

https://jsfiddle.net/Gh8st/4wrs8zL3/

21.05 в 16:11
  • 1
Администратор  |  722

Gh8st, что касается второго вопроса - вам нужно получаться все элементы при изменении содержимого, которые заключены в [b], и просто потом на jq вставлять их на страницу.

Вставка будет выглядеть примерно таким образом: $(".result").html("<img src="+link+" title='Изображение'/>");

Где +link+ - это полученный адрес изображения. Попробуйте, если не получиться - напиши в комментариях, постараюсь помочь написать скрипт.

19.05 в 17:32
  • 5
Администратор  |  722

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

Да и в принципе у нас уже есть статья на эту тему, где все уже соединено - https://www.pandoge.com/moduli_i_skripty/krossbrauzernaya-stilizaciya-inputtypefile-na-cssjquery

19.05 в 17:27
  • 8
Гости  |  679

У меня такой вопрос. Допустим есть textarea в него будут вставляться ссылки на изображения обернутые в bb-коды. Каким скриптом можно отобразить вставленные изображения в блоке preview?

Как-то так: https://jsfiddle.net/Gh8st/xk278j6r/

19.05 в 14:24
  • 0
Гости  |  679

Добрый день. Я попытался объединить код из этих статей. Но почему-то не работает https://jsfiddle.net/Gh8st/8zd8uacL/

Кстати можно сразу выкладывать архив с готовым примером или с помощью jsfiddle на странице embed'ом выводить.

19.05 в 14:11
  • 0
Подняться наверх
«Pandoge» - помощник веб-мастера