О web-разработке
и даже немного больше...

AJAX — загрузка файлов на сервер

Большинство веб-приложений, которые имеют функционал публикации материалов, содержат форму для загрузки файлов на сервер. Стоит признать, что стандартное поле для загрузки файлов на сервер проблематично стилизуется, да и не дает возможности должным образом адаптировать под свои задачи, по этим и другим причинам использование простого поля загрузки, верно, уходит в прошлое.

Поговорим о сегодняшнем дне. Сегодня для более удобной загрузки изображений всё чаще используют технологию Ajax, которая позволяет загружать изображения на сервер без перезагрузки страницы. Кроме того, с помощью данной технологии стало возможным более гибко интегрировать функционал загрузки файлов на сервер с интерфейсом веб-приложений, к примеру с различными визуальными редакторами.

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

FancyUpload

fancyupload

FancyUpload является достойной альтернативой стандартного загрузчика файлов на сервер. Простое, интуитивно понятное меню, состоящее из нескольких командных кнопок. Позволяет выбрать множество файлов для загрузки, выбранные файлы выстраиваются в список очереди загрузок, это показывается визуально на форме. Процесс загрузки файлов сопровождается анимированным индикатором выполнения. Загрузчик можно произвольно стилизовать, используя CSS и XHTML. Плагин использует библиотеку MooTools, и работает во всех современных браузерах.

Uploadify

uploadify

Uploadify – так же хорош, как и предыдущий загрузчик файлов, реализован на JQuery. Плагин настраивается как для единой загрузки файлов, так и для множественной. Файлы, выбранные для загрузки, выстраиваются в список. Для каждого загружаемого файла отображается анимированный индикатор выполнения загрузки файла. Интерфейс простой и ненавязчивый, командных кнопок по минимуму. Для работы так же требуется поддержка Flash. Интегрирование в проект производится довольно просто. Распространяется по лицензии GPL и MIT, это говорит о том, что плагин так же можно использовать и коммерческих продуктов.

Valum’s AJAX File Uploader v2.0

Valums-Ajax-File-Uploader-v2

Valum’s AJAX File Uploader – Ещё один из простых но удобных загрузчиков файлов на сервер. Кому приходилось пользоваться ранее данным продуктом заметят, что проект продолжает жить. Уже теперь вторая версия, в некоторой степени доработанная. Довольно простой интерфейс, загрузка файлов, так же как и в предыдущих загрузчиках сопровождается визуальной индикацией статуса выполнения загрузки. Работает во всех современных браузерах, и не требует дополнительных библиотек для своей работы.

AJAX Multiple File Upload Form Using jQuery

AJAX-Multiple-File-Upload

Загрузчик был создан разработчиками WebDeveloper+, по всей видимости, он не планировался как отдельный проект, название у него банальное. Однако это не говорит о том, что он плох, он так же может быть полезен, как и плагины, о которых говорилось выше. Интерфейс прост, одна кнопка, посредством которой можно выбрать набор файлов для загрузки на сервер. В процессе загрузки показываются миниатюрки изображений. В блоге разработчиков есть описание по применению. Для работы плагина так же требуется библиотека JQuery.

JqUploader

JqUploader

JqUploader — плагин для загрузки файлов на сервер. Для работы плагин использует библиотеку JQuery. На демо-странице сайта описаны варианты настроек внешнего вида плагина, которые могут быть использованы в тех или иных случаях. Форма загрузки имеет индикатор выполнения загрузки, так же показываются проценты выполнения – об этом я не дописал в предыдущих плагинах, в некоторых из них они так же присутвуют. Визуально всё удобно и простенько. После стилизации он неплохо может вписаться в интерфейс вашего проекта.

uploadprogress

uploadprogress

Uploadprogress плагин загрузки файлов реализованный с помощью JQuery. Пользователю предстоит выбрать несколько файлов по отдельности, затем нажать на кнопку старта загрузки файлов. Загрузка файлов сопровождается индикатором, в котором показывается скорость загрузки, скаченный объем, время до окончания.

Опубликован: 01.06.2014 г.

См. также:

Загрузка файлов на сервер посредством Ajax
Отложенная загрузка изображений Lazy Load
Анимация набора текста на Typed.js
Анимация отсчёта на jquery-spincrement
Mega Dropdown — Меню для мобильной версии
Отслеживаем клик вне элемента на JQuery
Ajax-загрузка записей при скроллинге и нажатии кнопки
Stimed – задаем CSS-стили по времени

Комментарии

  1. Алма пишет:

    Ого. В Казахстане есть блог про жаваскрипт.

    1. htmaker пишет:

      Почему бы и нет:)

Добавить комментарий для htmaker Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Комментарии
  • Загрузка...
Друзья сайта