JavaScript FormData — надсилання форми з JavaScript

FormData збирає дані форми — включно з файлами — у формат, який сервер розуміє як звичайну відправку форми.

правити

Загальний опис

Найкоротший спосіб — передати саму форму в конструктор: new FormData(form). Усі поля з іменами (name) потраплять туди самі, і файли теж.

Далі об'єкт віддається просто в тіло fetch — і браузер сам виставить заголовок Content-Type із правильною межею (boundary) для multipart/form-data.

Саме тому головна порада тут — нічого не виставляти вручну: спроба задати Content-Type самотужки ламає відправку, бо межу браузер згенерує, а в заголовку її не буде.

правити

Нотатка

Не задавай Content-Type вручну при відправці FormData. Без межі (boundary) сервер не зможе розібрати тіло, і файл не дійде.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

const data = new FormData(formElement);

методи

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	5	4	5	12	12	10

Підтримка: мобільні переглядачі

Переглядач
	3	18	4	5

Підтримка: серверні переглядачі

Переглядач
	18.0.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<form id="form">
    <input name="title" placeholder="Заголовок">
    <input name="photo" type="file">
    <button>Надіслати</button>
</form>

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

form.addEventListener('submit', async event => {
    event.preventDefault();

    const data = new FormData(form);

    // можна дописати те, чого немає у формі
    data.append('source', 'web');

    const response = await fetch('/api/upload', {
        method: 'POST',
        // Content-Type НЕ вказуємо: браузер додасть межу сам
        body: data,
    });

    console.log(await response.json());
});