Качване на множество изображения или файлове на сървър с jQuery и Ajax без добавки, Labdes
Качването на файлове или снимки на сървър е доста често срещана задача. Но напредъкът не стои неподвижен и затова сега, разбира се, искам файловете да се изтеглят във фонов режим. Като правило, по-рано това можеше да се реализира с помощта на технологията flash или iframe. Освен това много хора използват добавки като jQuery Form Plugin или Ajax File Upload Plugin или Multiple File Upload Plugin и много други. С появата на обекта FormData нещата станаха много по-лесни. FormData() ви позволява да съставите набор от данни, които да изпратите на сървъра с помощта на XMLHttpRequest.
И така, ето нашето html парче. Тук обръщаме внимание на факта, че имаме gif файл с изображение за предварително зареждане (цикличен кръг), който скриваме от показване със стилове. Също така присвояваме на файловото поле >
В тази форма, в допълнение към полето с файла, имаме още няколко полета, например: input=text. Тези. пред нас е обикновен формуляр, например за админ панела, който е набор от полета, от които се нуждаете. Като начало, ако искате, можете да проверите работата на скрипта, като напишете реда, показващ масива FILES в началото на файла:
Сега нека напишем нашия сървърен скрипт, който ще бъде извикан с помощта на jQuery. Неговата задача е да прехвърли качените файлове от временната директория на сървъра в нашата, да кажем, както сме решили в “tmp”, и след това да ги покаже.
А сега нашият js скрипт, който ще качи нашите файлове на сървъра във фонов режим. Цялата магия ще бъде направена благодарение на обекта FormData(). Ще добавим този код в края на нашия index.php преди тага.
Е, това изглежда е всичко. Ако някой не разбира нещо да пита. Ако някой има допълнения, също ще се радвам! Съвет: ако все още не сте използвали кода за премахване на файлове от никоя директория, препоръчвам да промените функцията за премахване на rmdir на echo, за да сте сигурниче ще бъдат изтрити само файловете, които искате да изтриете. Gif програмите за предварително зареждане могат да бъдат взети например от моя урок Как да направите Gif анимация. Примери в края на статията.
Ако някой иска да добави красота, като например лента за напредък, тогава за това ще трябва да добавим няколко реда код. В html шаблона ще добавим супер елемент от html5 - progress, а в js кода ще добавим няколко реда с обекта XMLHttpRequest. И така, нашият html ще бъде допълнен със следното:
И добавете към js кода:
Краен резултат от js код:
UPD2: За тези, които искат да проектират лентата за прогрес по-красиво, можете да разгледате статията за проектиране на елемента за прогрес в css, а в тази статия можете да разгледате вдъхновяващи примери за външния вид на лентата за прогрес.