Как в JS сделать запрос, аналогичный submit form в html?

Question

[Алексей]

Добрый день,
нужно в JS сделать post запрос с файлами, подобный тому, как работает отправка формы в html:

<form method="POST" enctype="multipart/form-data" action="/files/upload-multiple-files">
    <input type="file" name="files" multiple> <br/>
    <button type="submit">Submit</button>
</form>

Пытался в JS следующим способом, но не работает:

var formData = new FormData();
formData.append("files", this.images);
var xhr= new XMLHttpRequest();
xhr.open("POST", "/files/upload-multiple-files");
xhr.send(formData);
xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
           console.log(xhr)
      }
}

Подскажите в чем ошибка или в какую сторону копать.

Comments

[Rerurk]

Изучите fetch, передавайте данные как объект на стороне сервера проще будет потом

Answer 1

[Dima Polos]

Во-первых, просто передайте в конструктор FormData ссылку на форму, и этот конструктор соберет данные за Вас.
Во-вторых, как Вы свой код вызываете? Нужно на событие submit повесить обработку, туда передать Вашу функцию, которая должна принять объект события, и первой же строчкой отменить действие по умолчанию.
В-третьих, если передаете файлы, надо добавить заголовок Content-Type: multipart/form-data
И напоследок: Ваш код в консоль при успехе выведет не ответ от сервера, а объект xhr. Было бы неплохо проверить еще статус ответа, и потом в консоль вывести ответ.

Comments

[Алексей]

Действительно, как ни странно, с пустым конструктором не работало, как только объявил форму всё ок :) Спасибо!

[Dima Polos]

Алексей, успехов :)

Answer 2

[AUser0]

Вроде можно в форму прописать id=my_form, а потом document.getElementById('my_form').submit()

А если нужен работающим ваш код, то this.message не сработает, нужно более конкретно указывать элемент, из которого нужны данные. Например опять-же через <input type=file id=my_files name=files multiple> и

formData.append("files", document.getElementById('my_files').value);

. И вывод лучше через console.dir(xhr).

Answer 3

[ThunderCat]

во первых - код не понятно о чем, выглядит как будто вырван с мясом из какого-то другого кода. Нет события по которому он срабатывает (по идее должен быть слушатель на субмит формы), на что намекает этот недокод formData.append("files", this.images);, где this по идее сама форма. В остальном - надо по месту проверить консоль на ошибки, и соответственно хз что у вас лежит в this.images, скорее всего ничего, и из за этого вся дальнейшая свистопляска смысла не имеет.

Answer 4

[iddqda]

как то вот так:

const formData = new FormData();
const photos = document.querySelector('input[type="file"][multiple]');

formData.append('title', 'My Vegas Vacation');
for (let i = 0; i < photos.files.length; i++) {
  formData.append('photos', photos.files[i]);
}

fetch('https://example.com/posts', {
  method: 'POST',
  body: formData,
})
.then(response => response.json())
.then(result => {
  console.log('Success:', result);
})
.catch(error => {
  console.error('Error:', error);
});

цельнотянуто отсюда: https://developer.mozilla.org/en-US/docs/Web/API/F...