Информер доступности Интернета   •   Магазин расширений
529 просм
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
комментарий
Gh8st
19.05 в 14:11
Добрый день. Я попытался объединить код из этих статей. Но почему-то не работает https://jsfiddle.net/Gh8st/8zd8uacL/
Кстати можно сразу выкладывать архив с готовым примером или с помощью jsfiddle на странице embed'ом выводить.
  • 0
Gh8st
19.05 в 14:24
У меня такой вопрос. Допустим есть textarea в него будут вставляться ссылки на изображения обернутые в bb-коды. Каким скриптом можно отобразить вставленные изображения в блоке preview?
Как-то так: https://jsfiddle.net/Gh8st/xk278j6r/
  • 0
Gh8st, что касается первого вопроса - не совсем понятно как вы пытаетесь соединить данные скрипты. Я говорю о том, что классы и id в скрипте у вас указаны одни, а в форме совсем другие - логично все привести к единству.

Да и в принципе у нас уже есть статья на эту тему, где все уже соединено - https://artem-malcov.ru/moduli_i_skripty/krossbrauzernaya-stilizaciya-inputtypefile-na-cssjquery
  • 1
Gh8st, что касается второго вопроса - вам нужно получаться все элементы при изменении содержимого, которые заключены в [b], и просто потом на jq вставлять их на страницу.

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

Где +link+ - это полученный адрес изображения. Попробуйте, если не получиться - напиши в комментариях, постараюсь помочь написать скрипт.
  • 1
Gh8st
21.05 в 16:11
Первый вопрос решен :-) Спасибо.
Попробовал. Получилось вывести только первое изображение. Сможете помочь?
https://jsfiddle.net/Gh8st/4wrs8zL3/
  • 1
Gh8st, возможно я плохо смотрю, но я не заметил где настроен вывод 1 изображения
  • 1
Gh8st
22.05 в 19:41
Сначала надо кликнуть по ссылке "Clear bbcode". Регулярка уберет все нужное, оставив только url картинки. Потом по событию click в textarea выводим в блоке изображение. Можно проще, если вставить прямую ссылку на изображение и кликнуть после этого по textarea.
  • 0
Gh8st, Пробуйте - https://jsfiddle.net/4wrs8zL3/1/
  • 1
Gh8st
22.05 в 21:30
Все отлично работает! Большое спасибо :-)
  • 0
Оставить комментарий:
Нажимая кнопку «Отправить» вы даете согласие на обработку своих персональных данных.
Ваше Имя
Ваш E-mail
Текст комментария