JavaScript FormData.append() — додати поле до форми

Метод append() додає поле до FormData, не замінюючи наявні з таким самим іменем.

автор: NagarD

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

Це і є спосіб надіслати кілька файлів під одним іменем — саме так працює <input type="file" multiple>.

Третім аргументом можна задати ім'я файлу, під яким його побачить сервер, — зручно, коли файл згенеровано в коді й свого імені не має.

Значення перетворюються на рядок: число 42 стане '42'. Виняток — Blob і File, вони йдуть як є.

автор: NagarD

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач
append	7+	4+	5+	12+	12+	10+

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

Приклади

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

Кілька файлів і згенерований файл із власним іменем.

HTML

<input id="upload" type="file" multiple>

(async () => {
    const input = document.getElementById('upload');
    const data = new FormData();

    data.append('title', 'Звіт');

    // кілька файлів під одним іменем
    for (const file of input.files) {
        data.append('photos', file);
    }

    // згенерований файл — третім аргументом ім'я
    const blob = new Blob(['a,b\n1,2'], { type: 'text/csv' });
    data.append('report', blob, 'звіт.csv');

    console.log('Поля:', [...data.keys()]);

    try {
        await fetch('/api/upload', { method: 'POST', body: data });
    } catch (error) {
        console.log('У пісочниці немає сервера:', error.message);
    }
})();

автор: NagarD

Коментарі

Коментарів ще немає — будьте першим!