HTML5 jQuery скрипт файлового загрузчика

HTML5 jQuery скрипт файлового загрузчика
HTML5 jQuery скрипт файлового загрузчика


JQuery HTML5 загрузчик — это простой jQuery-плагин, подключив коотрый в веб-приложение или сайт, можно легко и удобно загружать файлы на подобие того как это реализовано в Gmail. Плагин поддерживает технологию drag and drop и загрузку нескольких файлов одновременно.

Чтобы использовать функционал плагина, нужно создать dropbox-элемент (например, div). После этого можно перетащить один или несколько файлов в эту область и файлы будут загружаться.

Подключение скрипта

<code>&lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"&gt;&lt;/script&gt;</code>
<code>&lt;script type="text/javascript" src="js/jquery.html5uploader.min.js"&gt;&lt;/script&gt;</code>
<code>&lt;script type="text/javascript"&gt;</code>
<code>$(function() {</code>
<code>	$("#dropbox, #multiple").html5Uploader({</code>
<code>		name: "foo",</code>
<code>		postUrl: "bar.aspx"</code>
<code>	});</code>
<code>});</code>
<code>&lt;/script&gt;</code>
<code>&lt;div id="dropbox"&gt;&lt;/div&gt;</code>
<code>&lt;input id="multiple" type="file" multiple&gt;</code>

Совместимость: протестирован в Firefox и Chrome.
Веб-сайт: //www.igloolab.com/jquery-html5-uploader/.
Лицензия: бесплатное использование.


Понравилась статья? Поделиться с друзьями:
Комментарии: 6
  1. Orcinus Orca

    А почему не освещен вопрос с серверной стороны? Почему только клиентская часть без примеров закачки на сервер?

    1. FORTRESS-DESIGN (автор)

      Да че там еще освещать-то? Все и так понятно. Подключаете этот скрипт, создаете див для приземления файлов и модуль загрузки готов.

  2. Orcinus Orca

    Я подразумевал скрипт забирающий файл со стороны сервера. Не верстка, ни публикация, а именно тот скрипт который положит принятый файлик на винчестер сервера. Без этого скрипта не имеет смысла в загрузчике который видит пользователь. Интересней было бы написать полный техпроцесс от выбора файлика на винчестере клиента, до его попадания на винчестер сервера. Пример хотя бы на PHP.

    1. Шамшур Иван

      Спасибо за наводку. Надо будет попробовать в одном из проектов. А о том как реализовать обработку файла на сервере можно прочитать тут: http://biznesguide.ru/tags/4

      1. Orcinus Orca

        Да я и сам могу написать этот скрипт для обработки. Просто посоветовал автору сделать полноценный пост ОТ и ДО. А тут освещен лишь процесс ГУИ-выбора файлика, а полноценной загрузки не освещено.

  3. Victor

    Бесполезная статья — ничего нового, просто тупо копи паст. Согласен с Orcinus Orca.

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: