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);

методи

Переглядачі

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

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

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

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

Переглядач
FormData	3+	yes	yes	5+

Приклади

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

<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());
});