Есть ли смысл использовать тег form, если не понимаю как обойтись без FormData()?

Question

[Анатолий]

Задача: Заполнение формы с анкетой (Имя, Фамилия) и несколько фоток (через multiple).

При загрузке одного фото, нет проблем с отправкой на сервер, если указываю несколько фоток, то отправляется только одна. Я решил вопрос с помощью кода ниже, но возник вопрос, если я вынужденно использую FormData(), то есть ли смысл использовать тег <form>? Или задача решалась как-то по другому, и form уже имеет какой-то объект с данными?

<form action="" method="post" enctype="multipart/form-data" id="myform">
	  <input type="file" name="images" multiple id="myimage">
	  <input type="text" name="name" placeholder="Имя" id="name">
	  <input type="text" name="lastname" placeholder="Фамилия" id="lastname">
	  <input type="submit">
	</form>

	<script>
		const images = document.getElementById('myimage');
		const name = document.getElementById('name');
		const lastname = document.getElementById('lastname');

		const my_submit = function(e) {
		  e.preventDefault();

		  let form = new FormData();
    	form.append('name', name.value);
    	form.append('lastname', lastname.value);

    	let a = 0;
    	for (let file of images.files) {
    		a++;
    		form.append('file['+ a +']', file);
    	}
			//	for (let i in images.files) {	form.append('file['+ i +']', images.files[i]);	}
			
		};

		const form = document.getElementById('myform');
		form.addEventListener("submit", my_submit, true);
	</script>

Код отправки через ajax я вырезал из кода, так как он прекрасно работает и к вопросу не относится.

Comments

[Сергей delphinpro]

https://developer.mozilla.org/ru/docs/Web/API/Form...

Если передадите в конструктор форму, то все поля оттуда будут считаны.

const form = document.getElementById('myform');
let new_form = new FormData(form);

И не нужно вручную их заполнять

[Анатолий]

Сергей delphinpro, верно, но при передаче нескольких файлов, передается только один! Только что проверил.

[Анатолий]

Сергей delphinpro, но все равно спасибо за подсказку, теперь код выглядит так:

const my_submit = function(e) {
    e.preventDefault();

    let form = new FormData(document.getElementById('myform'));
    form.delete('images');

    let a = 0;
    for (let file of images.files) {
    	a++;
    	form.append('file['+ a +']', file);
    }
};

[Сергей delphinpro]

Анатолий, Неправда. Все передаются.

https://jsfiddle.net/DelphinPRO/g40fk1u5/

скриншот

[Сергей delphinpro]

Анатолий, Во-первых, проинспектируйте массив $_FILES на сервере (если это php)
Во-вторых, попробуйте использовать имя images[] (как массив) https://jsfiddle.net/DelphinPRO/g40fk1u5/1/

[Анатолий]

Пишите ответом, отмечу как решение.
Да на сервере я проверял var_dump($_FILES);, файл передавался один.

Решение проблемы оказалось в images[].
Не разу не видел, чтобы name можно было так писать, думал это просто имя, а оказывается можно еще и массивом сделать.

Спасибо за подсказку.