В статье рассказывается принцип работы загрузки документов по принципу Drag-n-Drop, также приводится обзор двух способов реализации этой методики с использованием разных плагинов.
Существует большое количество ресурсов, в функционале которых предусмотрено закачивание файлов от пользователей на сервер. Ярким примером такого являются социальные сети, в которых пользователи загружают свои фотографии и песни. Для повышения удобства этого процесса существуют дополнения, которые позволяют загружать файлы простым перетаскиванием документа с рабочего стола компьютера или прочей директивы в специальное поле. Такая технология закачки носит название Drag-n-Drop.
Сегодня мы рассмотрим один способов реализации этого метода, при чем в нашем случае будет настроена мультизагрузка. Проще говоря, можно будет одновременно перетаскивать несколько файлов в загрузочную область.
Установка плагина
Для настройки Drag-n-Drop закачки понадобиться сам плагин и обычная библиотека jquery. После установки этого содержимого в директиву вашего сайта, необходимо программно подключить файлы, воспользовавшись следующим кодом
HTML
<script src="Drag-n-Drop/jquery.min.js"></script> <script src="Drag-n-Drop/jquery.client.js" charset="utf-8"></script>
В этом плагине уже прописаны необходимые классы и стили для вашего поля загрузки. Все что вам нужно — это правильно подключить плагин и библиотеку. Также нам необходимо добавить тег input, который в HTML-коде будет играть роль запасного варианта загрузки файла для тех случаев, когда браузеры не поддерживают систему Drag-n-Drop. Чтобы подключить возможность мультизагрузки — установим атрибут multiple со значением true. Ниже представлен пример с кодом
HTML
<input type="file" id="fileUpload0" multiple="true" size="60">
Для справки: особенности кроссбраузерности метода
- до версии 9.0 Internet Explower не поддерживает функционал File API, для этого мы и добавили стандартную загрузку — через тег input;
- Firefox работает с перетаскиванием только с версии 3.6, для ранних версий снова же работаем по старинке;
- касательно Opera ситуация более сложная, версии браузера до 11.1 могут работать с File API, но игнорируют систему Drag-n-Drop;
- Chrome отлично со всем справляется после обновлений 10.0;
- Safari будет корректно работать с DnD системой после версии 6.0.
Ниже показан скрин-шот, на котором показан пример работы системы DnD
Принцип работы системы Drag-n-Drop
- Плагин срабатывает после того, как пользователь отпустил левую кнопку мыши. Это происходит благодаря срабатыванию события drop.
- Событие drop инициализирует элемент DataTransfer.
- После срабатывания последнего объекта формируется список документов, который наш юзер перетащил в активное поле.
- В результате формирования списка, считывается содержимое каждого из его элементов по порядку. Эту функцию выполняет элемент FileReader.
- После каждого сканирования документа, результатом которого должно быть четкое определение типа файла, происходит присваивание каждому из них data URL. После того, как список будет закрыт, в силу вступает событие onloadend.
- Формирование data URL позволяет включить предварительный просмотр файлов перед загрузкой. Параллельно с этим работает возможность отображения прогресса загрузки файлов, благодаря протоколу XMLHttpRequest.
Подводя итог
Установка плагина довольно простая, еще особенно радует гибкость присвоения своего стиля вспомогательным элементам загрузочного поля. Нежелательные эффекты крассбраузерности устраняются наличием тега input, который позволяет загружать файлы по стандартной процедуре. Также стоит отметить, что проблемы с браузерами возникают только с ранними версиями, откуда следует что в наше время возникновение этой проблемы маловероятно.
