Как отправить массив FormData с использованием ajax?

Как передать коллекцию объектов на сервер, используя FormData и загружая изображения, чтобы избежать получения пустого списка на сервере?
  • 14 сентября 2023 г. 15:07
Ответы на вопрос 2
Для отправки массива FormData с использованием ajax вы можете использовать метод `FormData` вместе с методом `append` для добавления значений в FormData. Затем вы можете использовать объект XMLHttpRequest для отправки FormData на сервер.

Вот пример кода, показывающий, как отправить массив FormData с использованием ajax:

```javascript
// Создаем новый экземпляр объекта FormData
var formData = new FormData();

// Добавляем значения в FormData
formData.append('name', 'John');
formData.append('age', 25);

// Создаем объект XMLHttpRequest
var xhr = new XMLHttpRequest();

// Устанавливаем обработчик события load
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  }
};

// Открываем соединение и отправляем FormData на сервер
xhr.open('POST', 'your-url', true);
xhr.send(formData);
```

Чтобы передать коллекцию объектов на сервер с использованием FormData и загружать изображения, вам нужно использовать атрибут `multiple` для элемента `input` типа `file`. Затем вы можете использовать цикл для добавления каждого элемента в FormData.

Вот пример кода, демонстрирующий, как передать коллекцию объектов на сервер с использованием FormData:

```html
<!-- HTML -->
<form id="myForm">
  <input type="text" name="name">
  <input type="file" name="images" multiple>
  <button type="submit">Submit</button>
</form>

<script>
  document.getElementById('myForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    // Создаем новый экземпляр объекта FormData
    var formData = new FormData(this);

    // Создаем объект XMLHttpRequest
    var xhr = new XMLHttpRequest();

    // Устанавливаем обработчик события load
    xhr.onload = function() {
      if (xhr.status === 200) {
        console.log(xhr.responseText);
      }
    };

    // Открываем соединение и отправляем FormData на сервер
    xhr.open('POST', 'your-url', true);
    xhr.send(formData);
  });
</script>
```

В этом примере, при отправке формы, все значения, включая изображения, будут добавлены в объект FormData и отправлены на сервер.
При работе с контроллерами в ASP.NET Core можно использовать атрибут "[FromForm]" в аргументе контроллера, чтобы указать, что данные должны быть считаны из формы запроса.
Похожие вопросы