Лучшая Ajax форма загрузки файла + JQuery эффекты! | Vladmaxi.net
ГлавнаяВеб-разработчикуJQueryМини Ajax форма загрузки файла + JQuery эффекты!
Дата: 15.07.2013 в 00:36 | Просмотров: 9053

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

форма загрузки файла, ajax загрузка файлов
Скачатьбесплатно с сервера
Демодемонстрация

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

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

HTML

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

В заголовке документа, мы подключаем два шрифта WebFonts Google (их подключение не является обязательным, если хотите, можете поменять шрифт). Перед закрывающим тегом body Вы можете видеть ряд JavaScript скриптов. Это библиотека JQuery, плагин jQuery Knob и плагин jQuery File Upload.

Основным элементом на странице, является форма #upload. Внутри неё #drop (который является областью, при перетаскивании на которую, начинается загрузка файла) и неупорядоченный список ul. Этот список будет содержать все загруженные файлы, их состояние. Ниже Вы можете увидеть разметку, созданную для загрузки файла:

Элемент input в приведенном выше отрывке скрыт через CSS. Его единственное назначение состоит в инициализации JQuery плагина Knob и вывод красивого “значка” загрузки.

Также он имеет ряд атрибутов data-*, которые изменяют внешний вид “значка” загрузки. Тег span содержит значок справа – это может быть либо галочка или красный крест.

ajax форма загрузки файла

JQuery код

Есть два способа, с помощью которых пользователь может загрузить файлы:

  • Перетащить файл в браузер, внутрь элемента #drop;
  • Нажав на кнопку "Загрузить". Это будет имитировать нажатие на скрытый input file, системное окно просмотра файлов на компьютере. Обратите внимание, input имеет несколько параметров, что позволяет загружать сразу несколько файлов, просто выделив их (но файлы все равно будут загружены каждый индивидуально!).

По умолчанию, плагин помещает файлы в очередь, но мы сделаем загрузки файлов автоматически после их выбора. Вы можете увидеть JavaScript ниже:

Плагин jQuery File Upload поставляется с собственным JQuery UI интерфейсом, который можно использовать прямо сейчас. Однако нам нужен полностью пользовательский интерфейс, поэтому мы будем использовать базовую версию плагина, которая не включает в себя дизайн.

Для работы формы загрузки файлов, мы передаем несколько конфигураций / обратных вызовов, а именно:

  • dropZone – это свойство содержит JQuery селектор элемента, который будет выступать в качестве области для перетаскивания. Файлы, которые попали на него будут добавлены в очередь на загрузку.
  • add – эта функция обратного вызова вызывается при добавлении файла в очередь. Внутри него, мы создаем HTML разметку, которая будет представлять файл, добавлять его в список ul и вызывать data.submit (). Это приведет к прямой загрузке файлов, без ожидания.
  • progress – этот обратный вызов выполняется с помощью плагина каждые 100 мс (настраивается). Второй аргумент (данные атрибутов) содержит размер файла и сколько байт было загружено. Это позволяет рассчитать процент, а затем обновить скрытый элемент input, который в свою очередь, обновляет “значок” статуса загрузки.
  • fail – эта функция обратного вызова выполняется, если есть проблемы с Вашим PHP скриптом. Это, скорее всего, означает, что файл upload.php отсутствует или есть какая-то ошибка (используйте инспектор веб-браузера для настройки любых потенциальных проблем).
Смотрите полный список всех доступных параметров и конфигурация настроек плагина здесь.

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

PHP скрипт

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

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

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

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

Готово. Мы сделали!

Я надеюсь, что эта ajax загрузка файлов оказалась для вас полезной! Желаю успехов! ;)


Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://tutorialzine.com/2013/05/mini-ajax-file-upload-form/
Перевел: Владислав Бондаренко


ВСЕ КОММЕНТАРИИ

    1. Мансур:
      http://vk.com/slomo @

      Привет) А как сделать так, чтобы человек мог загружать только одно фото?

Добавить комментарий