Ajax форма для загрузки множества файлов используя jQuery

AJAX-форма загрузки файлов

В этом уроке мы разработаем ajax-форму для загрузки файлов с поддержкой Drag-and-drop, которая позволит посетителям загружать файлы через браузер. Мы будем использовать мощный плагин для мультизагрузки файлов jQuery File Upload совместно с jQuery Knob для отображения прогресса загрузки средствами CSS3/JS.

1. HTML и CSS

Как обычно, всё начинается с создания стандартного HTML5-документа и таблицы стилей:

В секции документа я подключил два шрифта Google Webfonts, а перед закрывающим тегом

Ajax-загрузка файлов с индикатором

IT блог — Ajax-загрузка файлов с индикатором

В настоящее время довольно популярным решением для веб-сайтов является работа пользователя со страницей без ее перезагрузки. В основном это делается с помощью Ajax – технологии асинхронного взаимодействия с сервером, основанной на объекте XMLHttpRequest. Мы описывали работу с Ajax с помощью библиотеки jQuery в статьях jQuery и Ajax и Использование Ajax.

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

В качестве тестового проекта создайте пустое приложение ASP.NET MVC в Visual Studio. Мы будем использовать C# на бэкенде (как я уже говорил, основное внимание мы уделим написанию JavaScript, так что для серверной части вы можете использовать любой другой язык). Добавьте библиотеку jQuery с помощью диспетчера пакетов NuGet (View Other Windows Package manager Console):

Добавьте в папку Controllers класс контроллера HomeController.cs со следующим содержимым (напомню, контроллер Home используется по умолчанию в настройках маршрутизации проекта – файл /App_Start/RouteConfig.cs):

Щелкните правой кнопкой мыши по методу Index и выберите в контекстном меню команду Add View. Visual Studio создаст файл представления /Views/Home/index.cshtml, а также компоновку по умолчанию /Views/Shared/_Layout.cshtml. Давайте подключим библиотеку jQuery в файле компоновки:

Здесь мы также добавили сброс стилей CSS для браузера и подключили таблицу стилей /Content/Site.css. Добавьте также файл script.js в папку scripts. Давайте теперь добавим форму для загрузки файлов в проект. Для этого откройте представление Index.cshtml и используйте следующую разметку:

В элементе section находится форма со вставкой загружаемых файлов. Файлы можно поместить в этот контейнер путем перетаскивания (drag-and-drop), либо через диалоговое окно после щелчка по элементу section. Элемент progress будет содержать индикатор загрузки файлов, в элементе error будут отображаться ошибки, а контейнер images нужен для отображения сохраненных на сервере картинок.

Теперь нам нужно добавить CSS-стили для страницы. Для этого отредактируйте файл /Content/Site.css следующим образом:

На данный момент форма выглядит следующим образом:

Теперь нам нужно добавить скрипт, который должен обеспечивать следующий функционал:

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

При перетаскивании файлов из проводника в окно браузера, элемент section должен подсвечиваться как при наведении курсора мыши (для этого мы добавили CSS-класс «dd&raqio;). При отпускании файлов (как и при выборе файла из диалогового окна) должна происходить загрузка картинок на сервер.

При загрузке файлов необходимо добавить индикатор и отобразить процент выполнения загрузки.

В случае ошибки на сервере, необходимо отобразить ошибки и скрыть индикатор.

В случае успешной загрузки картинок на сервер, необходимо отобразить их в контейнере images.

Следующий скрипт (файл script.js) решает все вышеуказанные вопросы:

Для сохранения списка файлов и передачи его на сервер через Ajax используется объект FormData.

Обратите внимание, что за отслеживание процесса загрузки отвечает свойство xhrFields объекта, передаваемого методу $.ajax. В этом свойстве хранится объект с функцией обработки события onprogress. Этому событию передается объект со свойствами loaded – объем уже загруженных данных, и total – общий размер данных. Благодаря этим двум параметрам мы можем отображать процесс выполнения загрузки на индикаторе.

В методе $.ajax() мы ссылаемся на метод действия Upload контроллера HomeController, который еще не был добавлен. Давайте исправим это и отредактируем файл HomeController.cs:

Здесь мы получаем файлы из индексатора Files объекта HttpRequestBase, который доступен в контроллере ASP.NET через свойство Request. Далее мы выполняем две простые проверки – размер файла не должен превышать 2 Мб и тип файлов должен быть либо JPG либо PNG. В случае несоответствия файла проверкам в скрипт возвращается объект с ошибкой, которая отображается пользователю. Иначе файл сохраняется в папке uploads проекта, ему присваивается сгенерированное с помощью GUID случайное имя.

Перед тестированием данного примера не забудьте добавить в корень проекта папку uploads.

Мини Ajax форма загрузки файла + JQuery эффекты!

↓ Также Вам будет интересно ↓

В этом уроке у нас в плане форма загрузки файла, которая позволит посетителям загружать файлы простым перетаскиванием их в окно браузера или же выбрав их, нажав на кнопку “Загрузить”.

Для этой цели мы будем использовать комбинацию jQuery File Upload плагина с изящным jQuery Knob современным интерфейсом на основе CSS3 & JS. В итоге у Вас будет ajax загрузка файлов, без перезагрузки страницы, и с отличным дизайном.

Как обычно, начнем с основного документа – разметки html5. Весь документ имеет следующий вид:

Ajax форма для загрузки множества файлов используя jQuery

Освойте бесплатно наиболее простой, быстрый и гибкий способ создавать адаптивные веб-сайты.

Дизайн лендинга

Создавайте дизайн любых сайтов — для себя и на заказ!

Популярное

  • Главная
  • ->
  • Материалы
  • ->
  • Ajax-форма для загрузки файлов

Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Цукерберг рекомендует:  Вакансии Navicon

Бесплатный Курс «Практика HTML5 и CSS3»

Освойте бесплатно пошаговый видеокурс

по основам адаптивной верстки

на HTML5 и CSS3 с полного нуля.

Фреймворк Bootstrap: быстрая адаптивная вёрстка

Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.

Верстайте на заказ и получайте деньги.

Что нужно знать для создания PHP-сайтов?

Ответ здесь. Только самое важное и полезное для начинающего веб-разработчика.

Узнайте, как создавать качественные сайты на PHP всего за 2 часа и 27 минут!

Создайте свой сайт за 3 часа и 30 минут.

После просмотра данного видеокурса у Вас на компьютере будет готовый к использованию сайт, который Вы сделали сами.

Вам останется лишь наполнить его нужной информацией и изменить дизайн (по желанию).

Изучите основы HTML и CSS менее чем за 4 часа.

После просмотра данного видеокурса Вы перестанете с ужасом смотреть на HTML-код и будете понимать, как он работает.

Вы сможете создать свои первые HTML-страницы и придать им нужный вид с помощью CSS.

Бесплатный курс «Сайт на WordPress»

Хотите освоить CMS WordPress?

Получите уроки по дизайну и верстке сайта на WordPress.

Научитесь работать с темами и нарезать макет.

Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!

Хотите изучить JavaScript, но не знаете, как подступиться?

После прохождения видеокурса Вы освоите базовые моменты работы с JavaScript.

Развеются мифы о сложности работы с этим языком, и Вы будете готовы изучать JavaScript на более серьезном уровне.

*Наведите курсор мыши для приостановки прокрутки.

Ajax-форма для загрузки файлов

В этом уроке мы будем создавать форму для загрузки файлов, работающую на Ajax, что позволит вашим посетителям загружать файлы через браузер перетаскиванием или просто выбрав их с помощью кнопки «Обзор». Для наших целей мы скомбинируем мощный плагин jQuery File Upload plugin с jQuery Knob.

HTML

Как обычно, начнём с html-разметки.

В заголовке документа между тегами head я решил подключить 2 шрифта с Google Webfonts, а до закрывающего тега body идёт некоторое количество JavaScript-библиотек. Здесь библиотеки jQuery, плагин jQuery Knob и вспомогательные «дочерние» библиотеки для jQuery File Upload plugin.

Главный элемент страницы это форма с , который поддерживает загрузку файлов методом drag’n’drop (т.е. обычным перетаскиванием) и неупорядоченный список.

В списке будут храниться элементы li для каждого из переданных файлов. Чуть ниже представлен код, отвечающий за генерацию отметки загруженного файла

Элемент ввода input в куске кода выше скрыт с помощью CSS.

Его единственное назначение — инициировать плагин jQuery Knob, который будет выводить красивую «подложку».

Тег span располагает иконку справа, — это может быть либо галочка, о том что файл успешно был загружен, либо красный крест, о том что файл не удалось загрузить.

Код jQuery

Существует 2 способа для загрузки файлов посетителями:

– с помощью перетягивания файлов в область div (поддерживается во всех браузерах, кроме IE)

– с помощью кнопки «Обзор». Это действие инициирует клик по скрытому элементу формы input, который выводит окно проводника операционной системы для загрузки файла.

Заметьте, что этот input имеет множество параметров, что позволяет, например, выделять сразу несколько файлов для загрузки (в то же время, файлы будут загружаться по очереди)

Работа плагина по умолчанию — это ставить файлы в очередь по одному, но мы сделаем автоматическую загрузку файлов, как только они будут перетянуты в область загрузки или же выбраны, что значительно упростит пользование данной формы. JS-код представлен ниже.

Библиотека jQuery для загрузки файлов идёт со своим встроенным дизайном, который вы можете прямо так и использовать.

Так или иначе, т.к. нам нужен полностью настраиваемый интерфейс, мы будем использовать базовую версию плагина, которая не включает в себя никакого интерфейса. Чтобы заставить всё это работать, произведём некоторые настройки в коде, что сверху:

– dropZone — настройка, хранящая jQuery-селектор, который будет действовать, как только файл будет перетянут и «брошен». Как только файл будет «брошен» он будет поставлен в очередь загрузки.

– add — функция обратной связи, которая вызывается как только файл был поставлен в очередь. Внутри неё находится html-отметка, которая будет представлять файл, добавляться к тегу ul и запускать метод data.submit(). Это позволит загружать файл без лишних ожиданий.

– progress — эта функция обратной связи выполняется плагином каждые 100ms (настраивается). Второй аргумент (атрибут data) содержит размер файла и информацию о том, сколько байтов данных было уже передано.

– fail — эта функция обратной связи срабатывает, когда есть какие-то проблемы в PHP-скрипте.

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

Свойство data.context сохраняется между вызовами методов плагина. Таким образом мы узнаём, к какому элементу li нужно отнести событие процесса загрузки или событие ошибки.

PHP

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

Загрузчик файлов отправляет плагину практически то же самое, что и форма загрузки — вы можете получить информацию о загрузках через массив $_FILES:

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

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

Готово! Надеюсь, вы извлекли пользу из этого урока и он вам ещё не раз пригодится.

Материал подготовил Денис Малышок специально для сайта CodeHarmony.ru

P.S. Кое-что понятно, но куда двигаться дальше? Присмотритесь к премиум-урокам по различным аспектам сайтостроения, а также к бесплатному курсу по созданию своей CMS-системы на PHP с нуля. Все это поможет вам быстрее и проще освоить веб-технологии: начиная с HTML и CSS и заканчивая JavaScript, Ajax, PHP и SQL.

Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!

Отправка формы с файлом по jquery.ajax

В старых браузерах способов загружать файлы без перезагрузки самой страницы, было не так уж и много (скрытый iframe, Flash). Если для вас не важна поддержка старых браузеров, то можно пользоваться прогрессом:)

Цукерберг рекомендует:  Новичок - Собираю команду новичков iOS. Есть первые заказы

Данный пост будет об отправке формы с файлом (файлами) без перезагрузки страницы, с помощью Jquery.Ajax

Еще до недавнего времени, способов загружать файлы без перезагрузки самой страницы, было не так уж и много (скрытый iframe, Flash). Они и сейчас используются по причине того, что еще остаются пользователи со старыми версиями браузеров, которых не коснулся прогресс.

Существует несколько способов отправки данных по ajax-технологии. Наиболее удобной можно назвать использование объекта FormData. Данный объект позволяет производить отправку данных даже в том случае, если на странице нет формы.

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

Пропишем в конфигурационный JS-файл общие правила для выполнения ajax-запросов:

Теперь перейдем к процессу передачи файлов, вместе с другими полями формы, по ajax-технологии:

Функция отправки данных формы, в таком случае, принимает вид:

И на сервере файле со скриптом-обработчиком прописываем механизм сохранения данных формы:

‘; $req = ob_get_contents(); ob_end_clean(); echo json_encode($req); // вернем полученное в ответе exit; >

Вот такие нехитрые манипуляции позволяют отправить без перезагрузки страницы данные из формы вместе с загружаемым файлом.

Благодарю за внимание! Делитесь вашими замечаниями в комментариях ниже.

Загрузка данных в форму с ajax

Javascript
Javascript
31.08.2014, 16:50

Ajax загрузка формы из загруженного через ajax блока
Вообщем, через ajax в блок подгружается форма, из нее нужно загрузить в этот же блок др.контент.

Ajax запрос — загрузка данных
Добрый вечер! Столкнулась с проблемой: на странице необходимо загрузить картинки с помощью Ajax.

ajax загрузка контента
Добрый день. У меня такая проблема, есть страница на ней кнопка регистрации по нажатию на неё.

Ajax загрузка блока
Может кто-нибудь помочь? Есть такой скрипт: $(document).on(‘click’, ‘.link’, function(e)< .

AJAX загрузка файлов.
Как сделать загрузку файла на jQuery без дополнительных плагинов (one click, ajaxForm и т.п.) и.

Ajax форма для загрузки множества файлов используя jQuery

Понадобилось сделать достаточно очевидную, казалось бы, вещь — страничку, на которой можно заполнить несколько полей формы, выбрать несколько файлов и при нажатии на кнопку чтобы всё это вместе отправлялось на сервер без перезагрузки страницы (через ajax).

Оказалось, что есть ряд ньюансов. По отдельности нет проблем, а чтобы всё вместе — начинаются сложности. В итоге всё заработало, так что предлагаю простой пример.
После успешной загрузки сервер возвращает содержимое массивов _POST и _FILES, которое выводится на ту же страницу.

Проверял в Windows версиях FF, Chrome, IE, Opera, а также в Android Chrome и старом Android Browser. Под IOS не проверял — нет под рукой.

Не работает в Safari 5.34/Win. Причина непонятна (симптомы — отправляет файлы нулевой длины).

Не будет работать в IE

Ajax file and form data upload test by Frog

Мини-форма выгрузки файлов AJAX

Дата публикации: 2014-01-23

От автора: Учебник о том, как воссоздать выскальзывающее боковое меню-колонку, которое можно увидеть на вебсайте GoogleNexus 7.

В этом учебнике мы собираемся создать форму выгрузки файлов AJAX, которая позволит пользователям выгружать файлы со своих браузеров, просто перетащив/отпустив или выбрав их индивидуально. В этих целях мы скомбинируем мощный плагин jQuery File Upload с аккуратным jQuery Knob и представим гладкий интерфейс под управлением CSS3/JS.

Как обычно, начнем с базового документа HTML5:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

В начало документа я включил два шрифта из Google Webfonts, а перед закрытием тэга body вы видите несколько библиотек JavaScript. Это библиотека jQuery, плагин jQuery Knob и зависимости для плагина jQuery File Upload. Основной элемент страницы – форма #upload. Внутри нее находится div #drop (принимающий выгрузки drag/drop) и неупорядоченный список. В этом списке будет содержаться элемент li для каждого из переносимых файлов. Ниже приведена сгенерированная разметка выгрузки файла:

Элемент input в вышеприведенном фрагменте скрыт с помощью CSS. Единственное его предназначение – инициализировать плагин jQuery Knob, который создаст красивый элемент загрузки (круговую шкалу). У input есть несколько атрибутов data-*, модифицирующих ее внешний облик. Позже, слушая прогресс выгрузки файла, мы обновим значение этого input, что вызовет перерисовку шкалы. У диапазона справа есть иконка; это может быть либо отметка-«галочка», либо красный крестик.

Код jQuery

С помощью этой формы можно выгружать файлы двумя способами:

Отпустив их в div #drop (во всех браузерах, кроме IE);

Щелкнув по кнопке «browse». Так симулируется щелчок по скрытому input файла, который выводит окно поиска файлов системы. Обратите внимание, что у input файла есть набор множества параметров, который позволяет выбрать зараз более одного файла (однако файлы все равно будут выгружаться индивидуально!).

Поведением по умолчанию этого плагина является размещение файлов в очередь, но мы сделаем так, чтобы файлы выгружались автоматически после выбора/перетаскивания. Ниже можно посмотреть JS:

assets/js/script.js

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Библиотека jQuery File Upload укомплектована собственным дизайном jQuery, управляемым интерфейсом, которым можно сразу же пользоваться. Однако, так как нам нужен полностью пользовательский интерфейс, мы воспользуемся не включающей его базовой версией плагина. Чтобы она заработала, передаем несколько опций/внешних вызовов конфигурации. В вышеприведенном коде это:

dropZone – это свойство содержит селектор jQuery элемента, который будет действовать как объект-приемник. Опускаемые в него файлы будут добавляться в очередь выгрузки.

add – эта функция внешнего вызова вызывается при добавлении файла в очередь. Внутри нее мы создаем разметку HTML, которая будет представлять файл, добавляем ее в UL и запускаем метод data.submit(). Он без промедления вызовет прямую выгрузку добавленного файла.

progress – этот внешний вызов выполняется плагином каждые 100мс (настраивается). Второй аргумент (атрибут data) содержит размер файла и количество переданных байтов. Это позволяет нам подсчитать процент выполнения и впоследствии обновить скрытый элемент input, который в свою очередь обновляет шкалу.

fail – эта внешняя функция выполняется, если с вашим скриптом PHP возникла проблема. Скорее всего, это будет означать, что upload.php отсутствует или выдает какую-то ошибку (для исправления потенциальных проблем воспользуйтесь инспектором своего веб-браузера).

Смотрите полный список доступных опций конфигурации на этой странице. Я включил еще несколько источников информации о плагине в раздел Ресурсы и дополнительная информация в конце этого учебника.

Свойство data.context между вызовами этого метода плагина сохраняется. Таким образом мы узнаем, который пункт LI нужно обновлять при событиях прогресса и сбоя закачки.

Скрипт PHP

jQuery File Upload также укомплектован мощным скриптом PHP для управления выгрузки файлов, который можно разместить на своем сервере, но в этом учебнике мы создадим свой собственный. Выгрузки файлов, посылаемые плагином, практически те же самые, что и при выгрузке обычной формы – получить информацию о выгрузке можно через массив $_FILES:

Javascript — JQuery Ajax Загрузка файла

Могу ли я использовать следующий код jQuery для загрузки файла с использованием метода post запроса Ajax?

Если это возможно, нужно ли заполнять часть «данные»? Это правильный путь? Я размещаю файл только на стороне сервера.

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

Решение

загрузка файла не возможно через ajax.
Вы можете загрузить файл, не обновляя страницу, используя IFrame.
Вы можете проверить более подробно Вот

ОБНОВИТЬ:

С XHR2 поддерживается загрузка файлов через AJAX. Например. через FormData объект, но, к сожалению, он не поддерживается всеми / старыми браузерами.

Поддержка FormData начинается со следующих версий настольных браузеров.
IE 10+,
Firefox 4.0+,
Chrome 7+,
Safari 5+,
Опера 12+

Для более подробной информации смотрите MDN ссылка

Другие решения

Iframes больше не нужен для загрузки файлов через ajax. Я недавно сделал это сам. Проверьте эти страницы:

Обновил ответ и убрал его. Используйте функцию getSize, чтобы проверить размер, или используйте функцию getType, чтобы проверить типы.
Добавлен прогрессбар html и css код.

Как использовать класс Upload

Прогрессбар css код

Возможна запись в Ajax и загрузка файла. я использую jQuery $.ajax функция для загрузки моих файлов. Я пытался использовать объект XHR, но не смог получить результаты на стороне сервера с PHP.

Как видите, вы должны создать объект FormData, пустой или из (сериализованный? — $(‘#yourForm’).serialize()) существующей формы, а затем прикрепите входной файл.

Для процесса PHP вы можете использовать что-то вроде этого:

Простая форма загрузки

Я опаздываю на это, но я искал решение для загрузки изображений на основе ajax, и ответ, который я искал, был немного разбросан по всему посту. Решение, на котором я остановился, включало объект FormData. Я собрал основную форму кода, который я собрал. Вы можете увидеть, как он показывает, как добавить настраиваемое поле в форму с помощью fd.append (), а также как обрабатывать данные ответа, когда выполняется запрос ajax.

В случае, если вы работаете с php, вот способ обработать загрузку, который включает использование обоих настраиваемых полей, показанных в приведенном выше html.

AJAX-загрузка действительно возможна с XMLHttpRequest (). Нет необходимости в фреймах. Процесс загрузки может быть показан.

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

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

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

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

FancyUpload

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

Uploadify

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

Valum’s AJAX File Uploader v2.0

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

AJAX Multiple File Upload Form Using jQuery

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

JqUploader

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

uploadprogress

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

Цукерберг рекомендует:  Какой mime тип использовать для mp3
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих