Drag'n'Drop in HTML5: загрузка файлов через Ajax

Немного о технологии Drag and Drop

Приветствую, хабракоммьюнити. Сегодня хотелось бы поговорить с вами об одном из нововведений HTML5 — Drag'n'drop технологии. Эта технология позволяет взаимодействовать с браузером методом перетаскивания отдельных элементов внутрь других элементов. Данной технологией мы, пользователи компьютеров, пользуемся (прошу прощения за тавтологию) ежедневно. Например, банальный пример с перетаскиванием файла в корзину.

Я уверен, что данная технология найдет множество применений в наших браузерах, и сейчас мы поговорим об одном из них, а именно о загрузке файлов.
Заинтересовало? Добро пожаловать под кат.

Поговорим более серьезно

Если вы читаете эти слова, то значит вы, как минимум, заинтересовались вышенаписанным. Последнее время можно замечать, что на многих хранилищах стали появляться прямоугольники, куда достаточно перетащить файл и он зальется на сервер. Удобно? Безусловно. Примером таких хранилищ являются Narod, Youtube.
Мне, как пользователю с бесконечным количеством папок и файлов, очень тяжело ориентироваться и искать нужные файлы с помощью диалогов выбора файлов. Мне гораздо проще открыть закладку в Nautilus (файловый менеджер в Gnome) и перетащить файл в программу. Именно поэтому выбираю клиенты, которые поддерживают данную технологию.

К тому же, можно перетаскивать сразу несколько файлов. Этого вопроса я коснусь, но в приведенном мной коде не будет многофайловой загрузки. При желании можно легко самому сделать это, и я коснусь этой темы.

Ну, перейдем к делу

Реализация

Мы будем писать до безобразия простой, небезопасный код, который не годится в использовании в конечном продукте, но(!) в этом вся и соль: данный код показывает только необходимый базис, остальное уже допиливается по вкусу.
Из необходимого нам нужен только сервер с поддержкой PHP и браузер с поддержкой Drag'n'drop (Chromium (и его наследство), Firefox, пользователи Opera пока идут мимоходом).

Итак, создаем каталог на сервере, к примеру, uploader. Создаем в нем два файла (у меня в кодировке UTF-8): index.php и uploader.php и папку uploades, которой устанавливаем Chmod в 777.
Теперь поподробнее:
index.php — наша главная страница.
uploader.php — страница, куда будет направляться Ajax-запрос с файлом.
uploades/ — папка, куда будут сохранятся все загруженные файлы.

Открываем файл index.php и начинаем писать:

Код здесь, так как Habrahabr режет теги

До этого момента, как я думаю, всем понятно. Поясню лишь два момента. Первый это то, что в первой строчке мы указываем тип документа в HTML5. Второй по поводу стилей: dragfile — наш прямоугольник, куда мы будем перетаскивать файл. Во время того, как над прямоугольником будет файл, к нему (прямоугольнику) будет добавляться класс enter, что позволяет нам видоизменить его. Здесь вид прямоугольника ограничивается лишь вашей фантазией.
Далее идет наш скрипт:

Код

Ну и теперь завершающий этап в этом файле. Здесь все понятно и на нем я останавливаться не буду:

Код

Теперь перейдем к файлу uploader.php, куда мы посылали наш файл. Его исходный код прост:

Код

Заключение

Вот мы с вами на один шажок приблизились к технологиям будущего, что не может не радовать.
Надеюсь, что данная статья оказалась хоть кому-то полезна. Спасибо.