AJAX качва файлове на сървър jQuery, IFRAME, PHP
Какво ще научим днес?
Качване на файлове на сървъра с AJAX + jQuery + PHP
Внедряването на качване на файлове на сървъра с помощта на AJAX е малко по-сложно от просто изпращане на текстова POST или GET заявка. Но не е толкова трудно да се разбере и овладее тази техника. Ако все още не разбирате напълно как AJAX и PHP взаимодействат, препоръчвам първо да прочетете статията за взаимодействието на PHP и AJAX. Но дори и да не знаете как работи технологията AJAX, това не е голяма работа, тъй като ще използваме библиотеката и приставката jQuery ajax_upload. И ако следвате всички примери и инструкции стъпка по стъпка, тогава можете да внедрите страхотен файл за качване на файлове на сървъра.
Същността на метода: Ще създадем HTML изображение на товарача, което ще съдържа: поле за въвеждане на файл, бутон за потвърждение, блок за състояние на изтегляне (ще се покаже: „заредено“ или „грешка“), ul списък (ще бъдат добавени нови DOM елементи, с други думи, това е списък с качени файлове). Ще създадем JS манипулатор за бутона за изпращане, използвайки синтаксиса jQuery, и ще предадем файла на приставката ajax_upload, която ще изпрати файла и всички необходими данни към страната на сървъра. Сървърната страна е нашето PHP приложение, което ще запази файла в желаната папка и ще върне резултата от работата. Или просто ще върне съобщение за грешка, ако нещо се обърка. Има задача, да започнем?
HTML код изтегляне на ajax
Нека създадем HTML файл, който съдържа скелета на нашия файл за зареждане. Ще дам HTML кода, след това ще обясня какво и какво.
Както можете да видите, HTML ajax на товарача е непоносимо сложен. Но все пак си струва да се изясни какво и какво:
КачванеФайл - това е нашият бутон за потвърждение за качване на файла на сървъра. По-долу е даден CSS дизайнерския код.
- това е блокът, в който ще поставим отговора от сървърната страна на приложението. Или „Заредена“ или „Грешка“.
- това е списък с файлове, качени на сървъра от нашия jquery + ajax uploader.
Както обещах, ще дам под CSS стила код за бутоните за потвърждение на качването на файл:
Сървър PHP страна на приложението
Ако се вгледате внимателно, ще забележите, че всичко тук е написано на руски текст, или по-скоро:
$uploaddir - директория на сървъра, където ще бъдат качени файлове.
$файл - името на качения файл, към който е прикачен пътят до сървърната директория.
Най-простото нещо вече е направено. Забавната част е пред нас - jQuery + AJAX страна за качване на файлове.
Както при всяко приложение, използващо JS, кодът трябва да бъде поставен в главата на документа. Друга важна бележка: преди да напишете този JS код, не забравяйте да включите библиотеката предварително. jQuery и плъгин ajax_качване. Ако вече сте го направили, чудесно, нека започнем да кодираме:
Първо инициализираме достъпа до бутона за потвърждение на изтеглянето и записваме към променливата btnUpload. В същото време получаваме достъп до блока от сървърни съобщения (статус). Следва работата с приставката ajaxкачване. Създаваме нов обект и посочваме необходимите параметри:
Действие - пътят до нашия сървър за обработка на качени файлове.