Качването на файлове чрез уеб формуляр е важна част от повечето съвременни приложения и уебсайтове. В този учебник ще научите как да реализирате ефективно елемента Input type="file" за качване на файлове. Ще разберете как работи процесът на избор на файл, как да се гарантира, че файла се изпраща правилно на сървъра и какви настройки са важни. Това ръководство е за разработчици, които искат да разширят познанията си за работа с HTML форми и качване на файлове.
Основни изводи
- Елементът за въвеждане type="file" позволява на потребителите да качват файлове.
- Използването на правилните типове форми и атрибути за Enctype е от съществено значение за успешното качване на файлове.
- Можете да създадете потребителски приятен интерфейс за качване на файлове с помощта на JavaScript.
По-стъпково ръководство
Най-напред трябва да се уверите, че съществува основната HTML форма с елемента за въвеждане type="file".
Тук в този локален пример вече съм настроил елемента за въвеждане с тип "File". Виждате, че до бутона има надпис "no file chosen". Елементът за въвеждане type="file" позволява на потребителите да изберат един или повече файлове, които после да бъдат отворени чрез диалогов прозорец на операционната система.
Изгледът на диалоговия прозорец се различава в зависимост от операционната система, било то Windows, Linux или MacOS. Тук е моят пример на MacOS система, където можете да изберете един или повече файлове. След като щракнете върху "Отвори", избраният файл се показва в полето за въвеждане.
Вече сте избрали файла и той се показва като стойност вътре в елемента за въвеждане. За обработка на формуляра използвам метода GET.
След това можете да изпратите формуляра, но ще забележите, че в URL адреса се показва само името на файла. Това обаче трябва да промените, за да прехвърлите цялото съдържание на файла към сървъра.
За целта трябва да промените метода на POST. За да проверите какво се изпраща, преминете към раздела Мрежа (Network Tab).
Преди това обаче трябва да се уверите, че сте избрали поне един файл. Ако изберете файла "image.jpg" и изпратите формуляра, може да го намерите в Payload. Но бързо ще разберете, че тук се изпраща само името.
Проблемът е, че атрибутът Enctype не е зададен. Трябва да го настроите на multipart/form-data, за да предавате файла в правилния формат на данни.
С този Enctype можете да се уверите, че сървърът получава файла в неговите бинарни данни. Когато го приложите, избираме отново нашия изображение файл и изпращаме формуляра отново.
Сега виждате, че предаването включва не само името на файла, но и бинарните данни, които трябва да се обработват от сървъра.
Сървърът след това трябва да декодира тези бинарни данни. Важно е сървърът да интерпретира тези информации правилно, за да запише файла в база данни или на сървъра.
За да разширите формуляра си, можете да добавите допълнителни полета за въвеждане. Например класическо текстово поле, за да изпратите името на изображението заедно с изображението.
Данните се пренасят като текст и бинарни данни. Това позволява многократна обработка на страната на сървъра.
Още една полезна страна е възможността за „multiple“, за да позволи на потребителите да качват няколко файла едновременно.
Когато добавите атрибута multiple, потребителите могат да избират повече файлове в диалоговия прозорец „Файл“.
Имайте предвид, че трябва да добавите слушател на събития, за да управлявате избраните имена на файлове, когато потребителите избират своите файлове. Това ви дава възможност да получите достъп и до броя на качените файлове.
Освен това можете да зададете кои файлови формати потребителят може да избира, като използвате атрибута accept.
Например, ако искате да разрешите само JPEG или PNG изображения, можете лесно да го настроите в декларацията на входа, за да се приспособи изборът в зависимост от операционната система.
Можете също така да посочите общи формати чрез image/*, за да позволите избор на всички изображения.
Ако искате да научите повече за възможностите на атрибута „accept“, препоръчвам ви да използвате уеб документацията на MDN.
Тази документация предоставя обширна информация за използването на елемента Input и други функции на формата.
Резюме
Сега сте видяли как да създадете проста уеб форма с елемент за качване на файлове. Разгледахме основни концепции, включително методите за изпращане на файл към сървъра и необходимите атрибути за оптимизиране на процеса на качване.
Често задавани въпроси
Какво е разликата между GET и POST при качването на файлове?GET изпраща само имената на файловете в URL адреса, докато POST пренася съдържанието на файла като бинарни данни.
Как да се уверим, че файла е изпратен в правилния формат?Задайте атрибута enctype на формуляра на multipart/form-data за изпращане на файлове.
Мога ли да избера повече от един файл наведнъж?Да, като добавите атрибута multiple в тага за въвеждане.
Как да огранича избираемите файлови формати?Използвайте атрибута accept в тага за въвеждане, за да посочите определени файлови формати.
Къде мога да намеря повече информация за елемента input type="file"?Мрежата за разработчици на Mozilla (MDN) е превъзходен източник на подробна информация и примери.
