Качване на файлове на сървъра с помощта на ajax

Добрият скрипт е инструмент, който ще ви спести много време и нерви при разработването на уеб приложение. От собствения си опит в създаването на уебсайтове знам, че значителна част от времето трябва да се изразходва за търсене на готови „велосипеди“ и решения, които опростяват нашата работа. Днес ще засегнем една от най-важните теми - качване на файлове или снимки на сървъра с помощта на ajax. И въпреки че има много статии и скриптове, ще кажа моята визия за този проблем и неговото решение в моя проект.

Какво може да направи той?

От една страна смешен въпрос, естествено е да се качват файлове! Но нека да разгледаме неговите отличителни характеристики и възможности:

  • Плъгинът поддържа множество функционалности;
  • Има собствена лента за напредъка;
  • Поддържа възможност за плъзгане и пускане;
  • Процесът на изтегляне е отменен;
  • Доста важна функция - не използва Flash;
  • Работи във всички съвременни браузъри, а за IE лично го проверих - поддържа го от версия 7.

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

Ако имате медиен ресурс или просто искате да добавите възможност за потребителите да качват файлове, тогава начинът, по който това се случва, е, че потребителят кликва върху бутона за качване с избрано изображение и чака някакъв резултат -> по това време неговата снимка стига до сървъра, където вече правим нещо с нея. Да, това е много, много опростена схема за зареждане, но тук е важно целият процес да може да бъде разделен на два етапа: визуална част и сървърна част. В тази статия ще разгледаме тази верига, използвайки пример,които можете да разгледате в демонстрацията, приложена към тази статия.

В самото начало на работа с плъгина трябва да включим следните файлове:

Сега ще добавим HTML маркирането:

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

След като приключихме с подготвителната работа, пристъпваме директно към работа със скрипта, който ще поставим в стандартна обвивка на jQuery.

Сега нека добавим функция, с която ще формираме шаблон за извеждане на състояния при зареждане на файл и събития, които могат да възникнат:

Функцията templateLogsHtml() е най-простата машина за шаблони за показване на нашите журнали за различни събития. Помислете за параметрите, които приема:

  • елемент - блокът, в който ще показваме логовете;
  • заглавие – заглавие на събитието;
  • type – тип събитие;
  • args - аргументи на събитието.

Сега ще добавя кода на самия вече конфигуриран буутлоудър, а под него ще опиша всички негови компоненти:

От този код вече можете да разберете, че настройката е доста проста и ясна, сега нека да разгледаме всички методи и свойства на товарача, използван за примера от демонстрацията:

    елемент е DOM възелът на дървото в нашия случай

Но това не са всички параметри, които могат да се използват - има много повече! Други можете да намерите чрез търсенето в самата библиотека.

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

Сега нека отидем на сървъра и да разберем как ще обработим данните. Ако отидете на уебсайта на разработчиците, ще намерите връзката в долната част на страницата и ще изтеглите архива с приставката там, след което ще съдържа готов PHP сървър. оттой се представя като файл с три класа. След като го прегледах, го коригирах малко за себе си. Разбира се, промените не са значителни, но има, така че ще надградя моята версия.

За да постигнат по-голяма съвместимост между различни браузъри, разработчиците на AJAX File-Uploader версия 2.0 използваха два метода за качване, а именно чрез ajax и чрез формуляр. В зависимост от поддържания метод, браузърът се свързва по един или друг начин. На сървъра ситуацията е същата, имаме три класа UploaderFileByXhr, UploaderFileByForm, Uploader. Първият и вторият отговарят за собствения си метод на изтегляне, а третият се използва за свързване на една от опциите, както и за обработка на получените параметри и проверка на изтеглянето на файла.

За да качите файл на сървъра, трябва да създадете екземпляр на обекта Uploader с подадените към него параметри:

  • файл - името на атрибута на името, което беше обсъдено по-горе;
  • формати - разрешени за качване файлови формати;
  • max_size - максимален размер на файла.

И сега остава да използвате метода upload_file ():

Този метод приема два параметъра:

  • Папката, в която искате да запишете файла;
  • Името на добавения файл.

И така, за да обобщим анализа на AJAX File-Uploader plugin версия 2.0: това е едно доста добро и удобно решение за качване на файлове, което е универсално и кросбраузърно, в повечето случаи ще бъде най-добрият избор за качване на файлове и снимки, но недостатъкът е, че има значителен размер.