Реалиация логики загрузки файлов с помощью Ajax может
быть совсем непростой, особенно если вы хотите получить поддержку Drag-n-Drop, предварительный просмотр изображений или статус загрузки.
Ниже представлен перечень из 10 плагинов с различными возможностями и
прекрасным пользовательским интерфейсом, который быстро позволит реализовать
красивый и функциональный загрузчик.
FineUploader
FineUploader
– это гибкий, активно поддерживаемый загрузчик, написанный на чистом JavaScript, то также
доступный и в виде плагина jQuery.
По сравнению с прочими плагинами, он выглядит наиболее интересно – и уникально
– реализованные возможности: пауза/возобновление загрузки,распределенная
загрузка, использование <canvas>, повторная загрузка, редактирование
имени файла и многое другое.
Dropzone.js
Dropzone.js – это загрузчик файлов
реализованный на чистом JavaScript и в виде плагина jQuery, практически со всеми возможными опциями, такими как
предварительный просмотр изображений, спецификация максимального размера файла,
переименование файлов при загрузке, паралельная загрузка и изменение размеров
изображений при загрузке. Документация простая и понятная для ознакомления,
хотя уже есть более 500 открытых проблем (ошибок и запросов) – многие из них
открыты много лет – поэтому есть шанс что если вы столкнетесь с какой то
проблемой, то останетесь с ней один на один.
jQuery File Upload
Как и Dropzone (#2), jQuery File Upload предоставляет вам похожий набор опций для удовлетворения
ваших потребностей (хотя и с другим интерфейсом) и идеальную интеграцию для jQuery UI и Angular.JS. Плагин очень популярен, поэтому вы
найдете много отзывов и ответов на StackOverflow, но у проекта
нет багтрекинга на github и документация не самая простая для ознакомления.
Plupload
Plupload – отличная выбор если вы хотите использовать встроеный UI. Он предлагает несколько
настроек загрузки, и огромное количество тем с поддержкой разных языков,
поддержкой Flash и Silverlight.
Formstone Upload
Formstone – это коллекция полезных веб компонентов, которая помимо всего прочего включает в себя и загрузчик, который реализовать в виде отдельного плагина jQuery. Поскольку он содержит только базовые настройки для кастомизации и простой UI, то его использование также не выховет никаких вопросов.jQuery.filer
Этот плагин концентрируется на прекрасном
встроеном пользовательском интерфейсе, он пострен на модульной архитектуре,
которая позволяет легко подключить или отключить компоненты и различные темы. В
дополнение, он предлагает вам PHP класс для обработки запросов загрузки.
Bootstrap File Input
Bootstrap File Input
– это Bootstrap 3.x плагин
с jQuery API который поставляется со всем необходимым для настройки. Он
не только позволяет вам использовать предварительный просмотр изображений, но
также текста, HTML,
видео, аудио, Flash и файлов объектов.
jQuery Upload File
jQuery Upload File – простой плагин загрузки со всеми базовыми возможностями,
такими как предварительный просмотр, локализация и возможность создать
собственный UI c
настраиваемыми шаблонами. Также он содержит примеры по использованию каждой
возможности, реализация должна работать быстро.
jQuery HTML5 Uploader
Этот загрузчик позволяет с использование Drag-n-Drop перенести файлы на элемент (например
<div>) и после этого загрузить файлы (или
файлы) по указанному адресу. Ни больше ни меньше.
Uploadify
Uploadify это jQuery плагин построенный на Flash, который добавляет кнопку select на ваш
сайт. Поскольку кастомизация ограничена, форум поддержки закрыт, а Flash больше
не будет использоваться в том объеме как прежде, то лучше его не использовать
вовсе. Есть другой плагин, который называется UploadiFive, который построен на HTML5 и доступен на том же
сайте, но коммерческая лицензия стоит порядка 100$ на момент написания.
Дополнение
Иногда вы – или ваши заказчики – можете иметь
специфические требования, и вам необходимо создать UI без jQuery, или следовать
какому-то определенному стилю. В таком случае вы можете –заинтересоваться вот
этими проектами, который позволяют вам реализовать загрузку файлов с полностью
самописным пользовательским интерфейсом:
Выводы
Это самые лучшие плагины существующие на рынке в
данный момент. Если у вас есть опыт использования их в ваших проектах – хороший
или плохой – поделитесь им в коментариях ниже.
