FormData javascript: как использовать API для работы с формами
Формы - неотъемлемая часть любого веб-приложения. Отправка данных с форм на сервер - одна из самых распространенных задач javascript-разработчика. Есть много способов реализовать эту задачу, но один из самых удобных - использовать объект FormData. Если вы хотите преуспеть в программировании, стоит изучить инструмент.
Что такое FormData
FormData - это встроенный интерфейс JavaScript для работы с данными HTML-форм. Он позволяет собирать данные формы в key-value пары и отправлять их на сервер.
Главное преимущество FormData в том, что данные кодируются и отправляются также, как если бы вы заполнили и отправили обычную HTML-форму с атрибутом enctype="multipart/form-data". Это избавляет от необходимости вручную сериализовать данные в правильный формат.
Кроме этого, FormData умеет работать с файлами, что делает его идеальным выбором для загрузки файлов на сервер. Это знает каждый современный программист и веб-разработчик.
Создание объекта FormData
Чтобы начать работу с FormData, нужно создать его экземпляр при помощи конструктора:
const formData = new FormData();
Также можно передать в конструктор существующий элемент формы, тогда все его данные будут скопированы в объект FormData:
const formElement = document.querySelector('form'); const formData = new FormData(formElement);
Добавление данных
Чтобы добавить данные в объект FormData, используется метод append():
formData.append('name', 'John'); formData.append('age', '35');
Также можно вызвать append() несколько раз для одного ключа, чтобы добавить несколько значений:
formData.append('hobbies', 'football'); formData.append('hobbies', 'programming');
В отличие от append(), метод set() устанавливает значение для ключа, заменяя все предыдущие:
formData.set('username', 'john.doe');
Чтение данных
Чтобы прочитать данные из FormData, можно использовать методы get() и getAll():
const name = formData.get('name'); // John const hobbies = formData.getAll('hobbies'); // ['football', 'programming']
get() вернет только первое значение, а getAll() - массив со всеми.
Работа с файлами
Уникальная особенность FormData - возможность добавлять файлы. Это можно сделать двумя способами:
- Из инпута типа file в форме:
const formElement = document.querySelector('form'); const formData = new FormData(formElement); // добавит файлы из инпутов
- Программно с помощью Blob или File API:
const fileInput = document.querySelector('input[type="file"]'); const file = fileInput.files[0]; formData.append('photo', file);
Поддержка файлов в FormData избавляет от необходимости реализовывать upload на чистом JavaScript.
Отправка данных на сервер
Чтобы отправить данные из FormData на сервер, можно воспользоваться fetch API:
const formData = new FormData(); formData.append('name', 'John'); fetch('/users', { method: 'POST', body: formData })\
FormData будет автоматически закодирован в multipart/form-data формат. Аналогично можно использовать FormData с XMLHttpRequest.
При загрузке файлов также можно реализовать показ прогресс-бара, опрашивая свойство upload.progress.
Поддержка браузерами
FormData поддерживается всеми современными браузерами, кроме IE. Для IE можно подключить polyfill.
Использование FormData с Axios
Популярная библиотека для работы с API Axios также поддерживает отправку данных через FormData.
Для этого объект FormData нужно передать в параметр data запроса:
const formData = new FormData(); formData.append('file', fileInput.files[0]); axios.post('/upload', formData)\
Axios автоматически установит правильный content-type и закодирует данные.
Отправка FormData в React
В React при отправке форм часто используют FormData.
Например, в обработчике сабмита формы:
const handleSubmit = (e) => { e.preventDefault(); const formData = new FormData(e.target); fetch('/users', { method: 'POST', body: formData }) }
Также можно собирать данные программно:
const handleSubmit = () => { const formData = new FormData(); formData.append('name', name); formData.append('email', email); // отправка на сервер }
Производительность и оптимизация
При работе с большими объемами данных, FormData может влиять на производительность из-за выделения памяти при кодировании.
Чтобы оптимизировать это, можно разбить данные на чанки и отправлять их частями. Например:
const formData = new FormData(); for(let i = 0; i < 10000; i++) { formData.append('items[]', item); if(i % 1000 == 0) { // отправка 1000 items fetch('/items', {body: formData}) Copy code// очистка formData = new FormData(); } }
Мобильные браузеры
На мобильных устройствах filesize имеет еще большее значение.
Чтобы оптимизировать размер отправляемых данных:
- Использовать сжатие изображений
- Отправлять только нужные данные с форм
- Разбить на чанки как описано выше
Это позволит снизить использование трафика и увеличить скорость отправки данных.
Веб-разработчикам часто нужно отсылать данные HTML-форм на сервер. Для этого есть удобный JavaScript API FormData. Выше мы подробно разобрали, как с помощью javascript formdata можно с легкостью собирать и отправлять данные форм любой сложности. Рассмотрели методы объекта FormData, примеры кода, работа с файлами и оптимизация производительности.
Выводы
FormData - мощный и удобный инструмент для работы с данными форм в JavaScript. Плюсы использования:
- Простая отправка файлов без лишнего кода
- Автоматическое кодирование данных
- Удобные методы для чтения/записи
- Хорошая поддержка браузерами
Единственным минусом можно считать невозможность хранить данные кроме строк и файлов. Но для большинства задач этого достаточно. Если у вас есть опыт написания программ на JavaScript, то эта информация может быть весьма полезной.