Качване на 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качване. Създаваме нов обект и посочваме необходимите параметри:

Действие - пътят до нашия сървър за обработка на качени файлове.

Име - това е името на полето за въвеждане, от което ще получим файла, качен на сървъра.

onSubmit - Функции, които се изпълняват преди качването на файлове на ajax на сървъра. В нашия случай това е валидиране на качени файлове (проверка на поддържаните разширения). Но отново, проверката, както се казва за "тесногръди", тази проверка е лесна за заобикаляне, така че си струва да се провери отново от сървърната страна на приложението.

статус.текст - текстът, който се показва по време на ajax качването на файлове на сървъра. Забележете, че ако файловете не се поддържат, се показва съобщение за грешка.

onComplete - Стартираме функцията след завършване на качването на файла на сървъра. В тази функция: изчистете стойността status.text; добавете качени файлове към листа файлове.

След това ще разгледаме по-усъвършенстван метод за качване на файлове ajax, който ви позволява да качвате няколко файла едновременно.

Качване на множество файлове на сървъра с помощта на AJAX, jQuery, PHP

Ако за вашите лични нужди трябва да направите красиво качване на няколко файла на сървъра с помощта на AJAX и PHP, тогава ще трябва да използвате някои допълнения към библиотеката jQuery. А именно:

jQuery форма приставка v2.18

Приставка за правилна работа на ajax с полета и форми.

Къде да го получите: www.malsup.com/jquery/form/

jQuery BlockUI приставка v2.14

Приставка, която ви позволява да показвате красиви съобщения за грешки.

Къде да го получите: www.malsup.com/jquery/block/

jQuery Приставка за качване на множество файлове v1.31

Приставка за библиотеката jQuery, която ви позволява да качвате няколко файла едновременно.

Къде да го получите: www.fyneworks.com/jquery/multiple-file-upload/

Ако вече сте изтеглили всички тези приставки и, разбира се, библиотеката jQuery, можем да започнем да се развиваме. Също така трябва да създадем PHP файл, както в предишния пример, който ще обработва данните от страна на сървъра. Нека го наречем: doajaxfileupload.php. Сега, по-подробно.

jQuery приставка за формуляр Е чудесен плъгин, той се използва за изпращане на файлове на сървъра чрез метод ajax. Има и други приложения за този плъгин.

jQuery BlockUI приставка - използва се за естетически цели, за показване на красиви съобщения за коректността на приставката МногократниФайлКачванеПриставка.

МногократниФайлКачванеПриставка - този плъгин е в основата на нашия многофайлов товарач. Позволява ви да изберете множество файлове. В същото време има гъвкави настройки за ограничаване на типа файлове, задаване на броя на качените файлове, проверка на файла за дубликати (ако такъв файл вече е избран) и т.н.

Сега, когато разполагаме с всичко необходимо, можем да започнем да разработваме ajax скрипт за качване на множество файлове.

Във файла index.php мисля, че всичко е ясно. Тук се намира самата форма за качване на файлове и са свързани jQuery библиотеката и всички необходими плъгини за работа с ajax. Няколко думи за конфигурацията на кода и приставката:

Посочете разширения на файлове, разрешени за качване, посочете максималния брой качени файлове.

Показва и премахва анимацията, когато ajax качва файлове на сървъра.

Отговаря за изпращането на файлове на сървъра.

doajaxfileupload.php - това е нашата сървърна страна на приложението, всичко е достатъчно ясно в него, ако имате нужда, можете да го редактирате по ваш вкус.

Може би всичко е свързано с качване на множество файлове на сървъра с помощта на AJAX, jQuery и PHP. Надявам се всичко да работи за вас, както и моето.

Качване на файлове в JS + IFRAME + PHP

Това изтегляне е просто, състои се от два файла и тежи около 1KB. Преминете към същността. Създайте своя HTML файл и поставете кода там:

Тук виждаме почти същите компоненти, както при просто качване на файлове на сървъра, само: цел = "rFrame " - за които вече говорихме по-горе; функция onResponse - той получава JSON обекта, който изпращаме от страна на сървъра. Също така, не забравяйте да включите многочасти /форма-данни, без което формулярът няма да качва файлове. След това нека разгледаме сървърния код на файла handler.php:

Сървърната страна на приложението е подобна на първия пример на тази статия, с изключение на изхода на код на javascript, който ще бъде изпълнен след презареждането на iframe и ще ни информира за резултата от качването на файла.

Много прост и интересен сценарий. Можете, разбира се, да го подобрите.