В последнее время я часто отправляю формы, которые включают текст типа ввода и файл для изображений, поэтому я подумал, что было бы отличной идеей рассказать, как это делается, или, по крайней мере, как я это сделал. Это решение, использующее чистый HTML и JavaScript без каких-либо дополнительных компонентов или фреймворков. (Надо начинать с основ!)

Сначала я просто создавал кучу элементов ввода и собирал данные из каждого из них для отправки с помощью RESTful API (GET, POST). По мере того, как я больше исследовал отправку входных данных, я наткнулся на элемент формы, который собирает ВСЕ входные значения в одном месте и отправляет их вверх, что намного удобнее и эффективнее.

// sendData.html
<form action=”/endpointUrl” method=”post”>
   First name: <input type=”text” name=”fName”>
   Select Image: <input type=”file” name=”image” id=”imageUpload”>
   <button type=”submit”>Submit</button>
</form>

Сначала мы начнем с создания базового элемента формы html, ничего особенного. Нам также нужны входные данные, чтобы мы могли их отправить, а в этом конкретном примере это текстовое поле и загрузка изображения. Пока все хорошо. Итак, если я нажму кнопку отправки, он должен отправить все входные данные в нашей форме в наш endpointUrl через атрибут формы action. И он может это сделать, потому что мы указали атрибут method формы как POST-вызов нашего endpointUrl.

Хорошо, теперь представьте, что мы настроили и реализовали серверную часть, где мы можем нажать endpointUrl для вызова POST для обработки наших данных. Но когда мы попытались извлечь данные, мы обнаружили, что ничего не было отправлено (данные в формате JSON). Сейчас мы чесаем в затылке и задаемся вопросом, почему не были отправлены данные. Разве у нас неправильно была начальная настройка формы и ее входных данных? Ну, почти.

Чего нам не хватало в нашей форме, так это включения атрибута enctype=”multipart/form-data”. Теперь наш элемент формы должен выглядеть так:

<form name=”myForm” enctype=”multipart/form-data” action=”/endpointUrl” method=”post”>

Это потому, что мы отправляем файл типа ввода вместе с обычным текстовым вводом. Таким образом, данные разделяются на два разных объекта данных. Это не делается для нас автоматически, мы должны создать объект данных для отправки на наш сервер. К счастью, уже существует объект данных под названием FormData, который мы можем использовать для включения наших входных данных.

// sendData.js
let formData = new FormData()
formData.append(‘imageUpload’, imageUpload)
formData.append(‘fName’, fName)
// do the POST call

Выше приведен код JavaScript для извлечения данных формы и отправки в наш вызов POST. По сути, мы здесь создаем новые FormData, добавляем наши данные (текст, файлы и т. Д.) И выполняем вызов POST через XHR или AJAX, в зависимости от того, как вы это делаете. Когда вы отправляете свои данные с помощью FormData, они разделяют ваши данные на два отдельных объекта, к которым вы можете получить доступ после того, как получите их на своем сервере. Более подробную информацию об отправке форм через Javascript вы можете найти здесь.

Полезно знать, как файлы отправляются и выгружаются с использованием чистого HTML и JavaScript, чтобы вы могли включать их в другие фреймворки по своему желанию и лучше понимать, как это делают определенные библиотеки.