Завантаження файлів на сервер шляхом перетягування
Завантаження фалів на сервер, досить поширене завдання у сайтобудуванні, і в більшості випадків воно вирішується шляхом додавання на сторінку стандартного поля форми file:
Але використання цього поля не завжди зручне, та й його стандартний дизайн не завжди сумісний з дизайном веб-сторінок. На даний час, дуже популярні завантаження на сервер шляхом перетягування фалів у спеціально відведену область сайту. Прикладом може бути сайт http://disk.yandex.ru:
У даному уроці ми з Вами почнемо створювати механізм завантаження файлів на сервер шляхом перетягування, і допоможе нам у цьому один із віджетів бібліотеки Formstone – Upload, який саме розроблений для цих цілей (офіційний сайт бібліотеки http://formstone.it/).
Віджет Upload
Отже, на тестовій сторінці видаляємо елемент форми file і замість нього маємо звичайний блок
Повний код тестової сторінки:
Зверніть увагу, що на цій сторінці вже підключено бібліотеку jQuery та ядро бібліотеки Formstone. Далі підключаємо віджет та його файл стилів (у файловій структурі тестової сторінки вже містяться дані елементи).
Тепер необхідно за допомогою бібліотеки jQuery вибрати блок, який служить областю прийому файлів і викликати метод upload():
Тепер давайте перейдемо до браузера і подивимося, що змінилося:
Тепер необхідно вказати деякі налаштування:
Основні налаштування віджету:
action - файл на сервері, який обробить передані дані (збереже файл на сервері);
label – рядок, який відображається у приймачі файлів;
postKey – ім'я поля у запиті;
maxQueue - максимальна кількістьодночасно надсилаються запитів;
maxSize – максимальний розмір файлу, що передається;
postData — додаткові дані, які будуть передані запитом POST на сервер.
Тепер необхідно створити файл обробник, який виконає збереження файлу, що передається.
Скрипт обробник.
Скрипт обробник, повинен прийняти дані і виконати певні маніпуляції, у нашому випадку - зберегти файли, що передаються, в певну папку сервера. Тому створюємо новий файл obr.php і додаємо наступний код:
Як Ви бачите, в даному файлі я описав у найпростішому вигляді скрипт збереження файлів, завантажених на сервер за протоколом HTTP POST, але для тестування віджету цілком підійде. У реальному випадку, перед збереженням завантаженого файлу, потрібно було б перевірити розмір і тип файлу, тобто перевірити чи дозволено завантажувати даний файл на сервер, а можливо і перевірити права користувача, тобто знову ж таки, чи дозволено йому завантажувати файли на сервер. Але це тема цього уроку, тому описаного коду цілком вистачить.
Зверніть увагу, що якщо до цього файлу ми звертаємося асинхронно, то весь висновок на екран буде повернено як відповідь від сервера. Тому якщо файл завантажений, ми повертатимемо 'OK', інакше — 'ERROR'. Тепер давайте протестуємо наш скрипт:
На цьому цей урок завершено. Основний функціонал скрипту ми з Вами реалізували і в наступному уроці займемося виведенням на екран результатів завантаження файлів.
Усього Вам хорошого та вдалого кодування.
Розробка веб-додатків на PHP
Створіть веб-додаток на PHP на прикладі прийому платежів на сайті