Тема загрузки файлов без перезагрузки страницы поднималась уже неоднократно. Даже я как-то давно писал про это. В основном рассматривались решения без флэша, но сегодня я хотел бы поговорить про плагин для jquery с использованием флэша, а именно о JQuery Uploadify.

Конечно, можно использовать и другой флэшевский загрузчик SWFUpload, но Uploadify, по моему мнению, на порядок легче и проще, вполне подходит для большинства целей, ну и конечно не забываем, что это плагин для нашего любимого jquery, что избавляет нас от подключения еще каких-либо библиотек ;)

Теперь рассмотрим всё на примере.

Использовать плагин очень просто, как и большинство других jquery плагинов ;)
Естественно, сперва подключаем js файлы:

<script type="text/javascript" src="jquery.uploadify.v2.1.0.min.js"></script>
<script type="text/javascript" src="swfobject.js"></script>

* This source code was highlighted with Source Code Highlighter.

Все успели заметить swfobject.js? Отклоняться от темы не буду, почитать про SWFObject и всего его плюсы можно в этом посте на Хабре.

Далее идёт следующий код:

$(document).ready(function() {
  $("#uploadify").uploadify({
    'uploader'    : 'uploadify.swf',
    'script'     : 'functions.php',
    'checkscript'  : 'check.php',
    'cancelImg'   : 'cancel.png',
    'queueID'    : 'fileQueue',
    'auto'      : true,
    'multi'     : true,
    'fileDesc'   : 'jpg',
    'fileExt'   : '*.jpg',
    'onComplete'   : function(event,queueID,fileObj,response,data) {$('#response').append(response);}
  });
});

* This source code was highlighted with Source Code Highlighter.

Теперь немного подробнее.

uploader — путь до самого флэш загрузчика uploadify.swf

script — это путь до нашего файла обработчика, у меня это файл functions.php, но в архиве с библотекой он именуется как uploadify.php.

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

cancelImg — путь до картинки, которая будет символизировать удаления файла.

queueID — id элемента, в котором будет содержаться список выбранных нами файлов. По умолчанию он создаётся ниже браузерной кнопки выбора файла.

auto — параметр, отвечающий, будут ли файлы загружаться автоматически сразу после их выбора, или нет. Если стоит значение false, то для начала загрузки можно использовать этот код:

<a href="javascript:$('#uploadify').uploadifyUpload();">Загрузить файлы.</a>

* This source code was highlighted with Source Code Highlighter.

Естественно, можно повесить вместо ссылки картинку или кнопку, тут уже на Ваш выбор.

multi — будет ли наш плагин служить для загрузки нескольких файлов, иль не будет :) Для загрузки одного файла можно обойтись и без флэша, так что смело оставляем тут true.

fileDesc — типы файлов в диалоге выбора. У меня тут стоят только jpg файлы.

fileExt — расширения файлов, разрешенных для загрузки. Смело можно добавить к моим jpg и другие, например: *.jpg;*.bmp;*.png.
Незабываем добавить эти типы файлов и в fileDesc, иначе не сможете выбрать эти файлы в диалоговом окне ;)
Также советую всё-таки проверять типы файлов на стороне сервера, ибо такую проверку на стороне клиента легко обойти ;)

onComplete — функция, которая будет вызвана сразу после загрузки файла. Замечу, не после загрузки всех файлов, для этого есть onAllComplete, а именно одного файла из очереди.
Данная функция будет вызываться каждый раз, как будет загружен очередной файл. У меня вызывается функция, которая получается ответ от моего обработчика functions.php и вставляет его в div с id response:

function(event,queueID,fileObj,response,data) {$('#response').append(response);}

* This source code was highlighted with Source Code Highlighter.

Страница самого плагина:
http://www.uploadify.com/

Страница с расширенной документацией по всем параметрам и функциям:
http://www.uploadify.com/documentation/

Вот собственно и всё. Будут вопросы — с радостью попытаюсь на них ответить и всячески помочь ;)
_________
Текст подготовлен в ХабраРедакторе