Завантаження файлів на сервер шляхом перетягування. Частина 1

18

Від автора: досить часто при створенні сайтів необхідно завантажувати на сервер різні файли. Наприклад, документи, архіви або зображення. При цьому стандартний завантажувач файлів форм не зовсім зручний, так і не вписується в дизайн сучасних сайтів. Тому в даному уроці ми з Вами почнемо створювати механізм завантаження файлів на сервер шляхом перетягування.

Завантаження файлів на сервер шляхом перетягування. Частина 1Завантаження файлів на сервер шляхом перетягування. Частина 1

Введення

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

Завантаження файлів на сервер шляхом перетягування. Частина 1

Але використання даного поля не завжди зручно, та і його стандартний дизайн, не завжди сумісний з дизайном веб-сторінок. В даний час дуже популярні завантаження на сервер шляхом перетягування файлів в спеціально відведену область сайту. Прикладом може служити сайт http://disk.yandex.ru:

Завантаження файлів на сервер шляхом перетягування. Частина 1

У даному уроці ми з Вами почнемо створювати механізм завантаження файлів на сервер шляхом перетягування, і допоможе нам в цьому один з віджетів бібліотеки Formstone – Upload, який розроблений для цих цілей (офіційний сайт бібліотеки http://formstone.it/).

Віджет Upload

Отже, на тестовій сторінці видаляємо елемент форми file і замість нього маємо звичайний блок

, який буде служити областю прийому файлів:

Повний код тестової сторінки:

Приклад Upload!!!

Зверніть увагу, на даній сторінці вже підключена бібліотека jQuery і ядро бібліотеки Formstone. Далі підключаємо віджет і його файл стилів (у файловій структурі тестової сторінки вже містяться дані елементи).

Тепер необхідно, за допомогою бібліотеки jQuery вибрати блок, який служить областю прийому файлів і викликати метод upload():

jQuery(‘document’).ready(function($) {
$(‘.upload’).upload();
});

Тепер давайте перейдемо в браузер і подивимося, що змінилося:

Завантаження файлів на сервер шляхом перетягування. Частина 1

Як Ви бачите, зовнішній вигляд приймального блоку змінений, тепер якщо перетягнути файл або декілька файлів в цей блок буде виконана асинхронна (методом AJAX) надсилання елементів на сервер. Але при цьому віджет Upload не зберігає файли на сервері, він тільки збирає інформацію про ті файли які необхідно відправити і, використовуючи метод AJAX відправляє запит типу POST) на сервер з необхідними заголовками. В цьому ми можемо переконатися, якщо подивимося консоль JavaScript:

Завантаження файлів на сервер шляхом перетягування. Частина 1

Тепер необхідно вказати деякі налаштування:

jQuery(‘document’).ready(function($) {
$(‘.upload’).upload({
action:’obr.php’,
label:’Перетягніть файл у блок завантаження’,
postKey:’newfile’,
maxQueue:1,
maxSize:10485760,
postData:{
name:’User’,
ip:’127.0.0.1′
}
})
});

Основні налаштування віджета:

action – файл на сервері, що обробляє передані дані(збереже файл на сервері);

label – рядок яка відображається в приймачі файлів;

postKey – ім’я поля в запиті;

maxQueue — максимальна кількість одночасно надісланих запитів;

maxSize – максимальний розмір передаваного файлу;

postData — додаткові дані, які будуть передані POST запит на сервер.

Тепер необхідно створити файл обробник, який виконає збереження переданого файлу.

Скрипт обробник.

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

Як Ви бачите, в даному файлі я описав у найпростішому вигляді скрипт збереження файлів, завантажених на сервер по протоколу HTTP POST, але для тестування віджета цілком підійде. У реальному ж випадку, перед збереженням завантаженого файлу, потрібно було б перевірити розмір і тип файлу, тобто перевірити дозволено завантажувати цей файл на сервер, а можливо і перевірити права користувача, тобто знову ж, чи дозволено йому завантажувати файли на сервер. Але це не тема даного уроку, тому описаного коду цілком вистачить.

Зверніть увагу, що якщо до даного файлу ми звертаємося асинхронно, то все виведення на екран, буде повернуто в якості відповіді від сервера. Тому якщо файл завантажений, ми будемо повертати ‘OK’, в іншому ж випадку — ‘ERROR’. Тепер давайте протестуємо наш скрипт:

Завантаження файлів на сервер шляхом перетягування. Частина 1

Після переміщення файлу в область завантаження, консолі JavaScript ми бачимо, що файл був переданий і в якості відповіді, була повернена рядок OK. При цьому в папці uploads з’явився новий збережений файл.

На цьому даний урок завершено. Основний функціонал скрипта ми з Вами реалізували і в наступному уроці ми займемося виведенням на екран результатів завантаження файлів.

Всього Вам доброго і вдалого кодування!!!