Basitkhan
@Basitkhan
full-stack developer, ux/ui designer

Как собрать все фотографии выбранные при помощи разных форм?

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

Всё работает, только я теперь хз, как собрать все фотографии в единый массив и передать на сервер при помощи ajax, а можно и не ajax.(всё равно переходит на другую страницу).

skrinshoter.ru/i/250618/HEdW5W7O.jpg
  • Вопрос задан
  • 112 просмотров
Решения вопроса 1
ProjectSoft
@ProjectSoft
Front-end && Back-end разработчик
Не известно что и как у вас по логике вёрстки, форм, etc.
Поэтому пример только для сбора всех заполненных input файлов.
Используем FormData
<!DOCTUPE HTML>
<html>
	<head>
		<title>Test</title>
	</head>
	<body>
		<input type="file"><br>
		<input type="file"><br>
		<input type="file"><br>
		<input type="file"><br>
		<input type="file"><br>
		<input type="file"><br>
		<input type="file"><br>
		<button id="click">Test</button>
		<script>
			var btn =document.getElementById('click');
			click.addEventListener('click', function(e){
				var files = document.querySelectorAll('input[type="file"]'),
					fd = new FormData();
				if(files){
					files.forEach(function(input, index, list){
						if(input.files.length){
							fd.append("filesUpload[]",input.files[0]);
						}
					});
				}
				// вывод для теста
				console.log(fd.getAll('filesUpload[]'));
				// Отправляем ajax
				// Повесить обработчики отправки!!!!
				var request = new XMLHttpRequest();
				request.open("POST", "http://localhost/submitform.php");
				request.send(fd);
			});
		</script>
	</body>
</html>

Что пришло на сервер в $_FILES
WfIcr5ggo6wo7QdPhLoqapqY5zamtv.png
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы