Конечно, можно использовать и другой флэшевский загрузчик SWFUpload, но Uploadify, по моему мнению, на порядок легче и проще, вполне подходит для большинства целей, ну и конечно не забываем, что это плагин для нашего любимого jquery, что избавляет нас от подключения еще каких-либо библиотек ;)
Теперь рассмотрим всё на примере.
Использовать плагин очень просто, как и большинство других jquery плагинов ;)
Естественно, сперва подключаем js файлы:
* 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, то для начала загрузки можно использовать этот код:
"javascript:$(`#uploadify`).uploadifyUpload();">Загрузить файлы.
* 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/
Вот собственно и всё. Будут вопросы — с радостью попытаюсь на них ответить и всячески помочь ;)
Распечатать статью