Завантаження файлів на сервер за допомогою ajax

Хороший скрипт - це інструмент, який заощадить вам масу часу та нервових клітин при розробці веб-додатку. З власного досвіду створення сайтів знаю, що значну частину часу доводиться витрачати саме на пошук готових «велосипедів» та рішень, які спрощують нашу роботу. Сьогодні ми торкнемося однієї з найважливіших тем – завантаження файлів або картинок на сервер за допомогою ajax. І, хоча є безліч статей та скриптів, я розповім своє бачення цієї проблеми та її вирішення у себе в проекті.

Що він може робити?

З одного боку, смішне питання, природно завантажувати файли! Але давайте розглянемо відмінні його риси та можливості:

  • Плагін підтримує Multiple функціонал;
  • Є власний прогрес з коробки;
  • Підтримує можливість Drag-and-drop;
  • Процес завантаження скасовується;
  • Досить важлива особливість – не використовує Flash;
  • Працює у всіх сучасних браузерах, а що стосується IE, то сам особисто перевіряв – підтримує починаючи з 7 версії.

Як бачите, цього вже не мало, але ще хочеться додати, що при його налаштуванні дуже зручно відловлювати різні події, а також обробляти дані на сервері, власне, про це далі.

Якщо у вас медіаресурс або ви просто захотіли додати можливість користувачам завантажувати файли, то, як це в основному відбувається: користувач натискає на кнопку завантажити, вибравши картинку, і чекає якогось результату -> у цей час його картинка потрапляє на сервер, де щось із нею робимо вже ми. Так це дуже спрощена схема завантаження, проте, тут важливо, що весь процес можна розділити на два етапи: візуальна частина і серверна частина. У цій статті ми і розглянемо цей ланцюжок на прикладі,який ви можете вивчити у демо, прикріпленому до цієї статті.

На початку роботи з плагіном нам необхідно підключити наступні файли:

Тепер ми додамо HTML розмітку:

Додамо ще блок, в якому ми виводитимемо стани завантаження файлів:

Закінчивши підготовчі справи, переходимо безпосередньо до роботи зі скриптом, який помістимо в стандартну jQuery обгортку.

Тепер додамо функцію, за допомогою якої ми формуватимемо шаблон для виведення станів при завантаженні файлу та подій, які можуть виникнути:

Функція templateLogsHtml() є найпростішим шаблонизатором для виведення наших логів для різних подій. Розглянемо параметри, що приймаються нею:

  • element – ​​блок у який ми виводитимемо логи;
  • title – заголовок події;
  • type – тип події;
  • args - аргументи події.

Тепер я додам сам код вже налаштованого завантажувача, а нижче під ним опишу всі його складові:

З цього коду вже можна зрозуміти, що налаштування досить просте і зрозуміле, тепер давайте розглянемо всі методи та властивості завантажувача, використані для прикладу з демо:

    element – ​​вузол DOM дерева у нашому випадку

Але це далеко не всі параметри, які можна використовувати – їх набагато більше! З іншими ви можете ознайомитися, скориставшись пошуком по бібліотеці.

Стилі, які візуалізують приклад демо перебувати у файлі main.css, я не став їх додавати в статтю, тому що вони не мають великого значення, а в архіві є.

Тепер давайте перейдемо до сервера і розберемося, як ми оброблятимемо дані. Якщо перейти на сайт розробників, посилання ви знайдете внизу сторінки та завантажити там архів з плагіном, то в ньому буде готовий сервер PHP. Звін представляє файл з трьома класами. Після його розгляду, я трохи підправив його під себе. Звичайно зміни не суттєві, але є, тому я відштовхуватимуся від мого варіанту.

Щоб досягти більшої кросбраузерності розробники AJAX File-Uploader версії 2.0 скористалися двома способами завантаження, а саме через ajax і через форму. Залежно від підтримуваного методу браузером підключається той чи інший спосіб. Така сама ситуація і на сервері, у нас – три класи UploaderFileByXhr, UploaderFileByForm, Uploader. Перший і другий відповідають кожен за свій спосіб завантаження, а третій використовується для підключення одного з варіантів, а також обробки параметрів, що приймаються, і перевірки завантаження файлу.

Для завантаження файлу на сервер необхідно створити екземпляр об'єкта Uploader з переданими параметрами:

  • file – назва атрибута name, який було розглянуто вище;
  • formats – формати файлів, що допускаються для завантаження;
  • max_size - максимальний розмір файлу.

А тепер залишиться скористатися методом upload_file():

Цей метод приймає два параметри:

  • Папка, до якої потрібно зберегти файл;
  • Ім'я доданого файлу.

І так, підіб'ємо підсумок аналізу плагіна AJAX File-Uploader версії 2.0: це досить відмінне і комфортне рішення для завантаження файлів, яке універсально і кросбраузерно, в більшості випадків воно буде найкращим вибором для завантаження файлів і картинок, але недолік - має значний розмір.