HTML5 - Качване на файлове

Когато имаме формуляри за събиране на данни на една страница HTML5 Освен че можем да приемаме данни с полета за тип въвеждане, можем да качваме и файлове, с това можем да ускорим зареждането на определени данни, които е невъзможно да бъдат изразени в текст или които могат да бъдат много дълги текстове, обичайно е да качвате изображение файлове или pdf файлове, тъй като тези два формата са много популярни, обаче с Аякс можем да качим почти всеки тип файл.
Качване на файлове
Да се качвайте файлове с помощта на Ajax, трябва да създадем поле за тип файл във форма и в нашата рутина Аякс използвайте обект FormData с които ще събираме данните, за да можем да им дадем необходимия формат и да качим нашия файл на сървъра.
Предметът FormData трябва да се използва внимателно, тъй като все още може да има версии на браузъри, които не го поддържат напълно, но това е доста солидно решение.
Нека да видим в следния код как да направите основно качване на файл:

 ПримерБанани:Ябълки:Череши:Файл:Обща сума:0 артикулаПодай формуляр 

Когато включвате въвеждане на тип файл, обектът FormData автоматично прави уговорките, така че нашият файл да може да бъде качен на сървъра, на следното изображение можем да видим как браузърът интерпретира това:

В този случай това беше доста светло изображение, така че времето за качване на файла на сървъра не се забелязва, но ако беше PDF с размер 30 MB, времето би било много по -дълго, тъй като това е прозрачно за потребителя, той може да мисли, че страницата не "прави нищо" или е "мислел", за да избегнем това, можем да включим лента за напредък, с която напредъкът става видим.
За да видим напредъка на изкачването, ще използваме обекта XMLHttpRequest за да проверите състоянието на заявката Аякс:

 ПримерБанани:Ябълки:Череши:Файл:Напредък:Обща сума:0 артикулаПодай формуляр 

Ние сме дефинирали елемент напредък и с него XMLHttpRequest обект Можем да присвоим стойностите, докато качването напредва, в браузъра можем да го видим по следния начин:

Увеличете

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