Как отправить несколько данных и несколько фото одновременно?

Чтобы отправить несколько данных и несколько фото одновременно в JavaScript, мы можем использовать XMLHttpRequest или Fetch API для создания и отправки запроса на сервер.

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

<form id="myForm" enctype="multipart/form-data">
  <input type="text" name="name" value="John">
  <input type="text" name="email" value="john@example.com">
  <input type="file" name="photo1">
  <input type="file" name="photo2">
  <input type="submit" value="Submit">
</form>

В этом примере, у нас есть два текстовых поля и два поля типа "file" для выбора фото.

Теперь, давайте напишем JavaScript код для отправки данных и фото на сервер:

const form = document.getElementById('myForm');

form.addEventListener('submit', (e) => {
  e.preventDefault();
  
  const formData = new FormData(form);
  
  const xhr = new XMLHttpRequest();
  
  xhr.open('POST', '/api/endpoint', true);
  
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log(xhr.responseText);
    }
  };
  
  xhr.send(formData);
});

В этом коде мы сначала получаем ссылку на форму по ее id. Затем мы добавляем слушатель события "submit" на форму. Внутри обработчика события, мы отменяем стандартное поведение формы с помощью preventDefault(), чтобы предотвратить перезагрузку страницы после отправки формы.

Затем мы создаем новый экземпляр FormData и передаем в него элемент формы. Это создаст объект, содержащий все данные формы и выбранные фото.

Затем мы создаем новый XMLHttpRequest объект и открываем соединение с заданными параметрами. В данном примере, мы отправляем POST запрос на "/api/endpoint".

Затем мы добавляем обработчик события onreadystatechange, который будет вызываться каждый раз, когда состояние запроса изменяется. Мы проверяем, что состояние запроса равно 4 (запрос завершен) и статус равен 200 (успешный запрос). В этом случае, мы выводим ответ сервера в консоль.

Наконец, мы отправляем запрос на сервер с помощью метода send() и передаем в него объект FormData.

Таким образом, мы отправляем несколько данных и несколько фото одновременно на сервер с использованием XMLHttpRequest или Fetch API в JavaScript.