FormData: полета и файлове в една заявка

Полезно е да знаеш

Формулярът може да съдържа текстови стойности и избран файл. FormData предоставя начин тези данни да бъдат събрани като двойки ключ и стойност за изпращане. Обектът може да се използва с fetch и други поддържащи го интерфейси. Данните се представят във формата, използван от формуляр с кодиране multipart/form-data. Това е различна задача от превръщането на произволен обект в JSON: трябва да бъде запазена връзката между имената на полетата и техните стойности, включително файловото съдържание. [1]

FormData може да бъде създаден от съществуващ формуляр или попълнен програмно. Методът append добавя стойност към ключ, а set задава стойност и заменя съответните предишни стойности. [1] Това разграничение има значение при полета с повече от един избор. Например няколко приложени изображения и едно име на материал не описват един и същ вид информация. Преди изпращането е полезно да има списък на очакваните имена и на допустимия брой стойности за всяко от тях.

Нека си представим измислен формуляр за изпращане на снимка към клубна изложба. Той има заглавие, кратък надпис и файл. Успешният сценарий може да бъде описан като последователност: избор на снимка, попълване на текста, изпращане и ясно потвърждение. После се добавят отделни случаи без файл или без заглавие. Така техническото събиране на стойности се свързва с реалната задача, вместо да се проверява само дали заявката е напуснала браузъра.

При създаване от HTML формуляр са важни имената на полетата; FormData използва именуваните контроли, които участват в събирането. Изключените контроли не се включват по същия начин като активните. [2] Това обяснява защо видимото наличие на поле не е достатъчно доказателство, че неговата стойност е изпратена. При диагностика трябва да се сравнят очакваният списък и действително събраните двойки. Така липсващо име се различава от грешка при обработката на сървъра.

При изпращане на FormData през браузъра не бива ръчно да се задава Content-Type за multipart тялото. Браузърът трябва да добави правилната граница, която отделя частите. [2] В учебен пример е полезно да се разгледат имената и типовете на частите, без в диагностичния изход да се публикуват лични данни или самите снимки. Целта е да се разбере структурата на заявката и причината получателят да разпознава отделните стойности.

Завършената функция има нужда и от ясна реакция след отговора. Дали формулярът остава попълнен при неуспех? Разбира ли посетителят кое трябва да поправи? Може ли да различи успешно изпращане от продължаващо изчакване? FormData не взема тези решения, но позволява съдържанието на формуляра да бъде предадено в подходяща структура. Добрата реализация съчетава този механизъм с точен договор за полетата и проверими сценарии за човека, който ги попълва.