JavaScript программирование →  jQuery - Uploadify 3.0.0beta обновление мультизагрузчика файлов. Переход на SWFUpload.

Те, кто искал решения для AJAX мультизагрузки файлов, несомненно знакомы или по крайней мере слышали о плагине для jQuery — Uploadify. И вот на Рождество, по словам автора в качестве подарка, он выпустил бета версию Uploadify 3.0.0. Изменения по сравнению с предыдущей версией очень значительные, и не смотря на статус беты новинку вполне можно использовать, правда с некоторыми модификациями о которых расскажу ниже.

Итак — что нового:

— главное изменение это отказ от SWFObject и переход на SWFUpload в качестве флеш движка, что по словам автора должно увеличить стабильность и совместимость, но пришлось пожертвовать возможностью одновременного запуска нескольких загрузчиков;
— Javascript код полностью переписан;
— каталог в который будут загружаться файлы теперь указывается в скрипте на стороне сервера я не как опция на стороне клиента;
— изменены названия вызываемых событий;
— кнопка выбора файлов теперь не целиком сделана в флеш, а являет собой обычную CSS3 кнопку размещенную позади прозрачного флеш элемента, что позволяет управлять ее внешним видом.
Ознакомившись с изменениями становится ясно что код под старую версию не будет работать с новой без внесения соответствующих изменений. Вот тут и начинается первое затруднение: нет документации к новой версии, ни на русском, ни даже на английском. И на официальном сайте пока только обещания от автора. Значит будем писать свою.
По сравнению с прошлой версией некоторые параметры перестали использоваться, появились новые, старые изменили названия, поэтому представляю свой краткий вариант документации для этой версии.

Параметры которые передаются в плагин, и их значения по умолчанию:

swf:«uploadify.swf» — путь до файла флэш загрузчика.
uploader:«uploadify.php» — путь к скрипту обработчика, пример можно найти в архиве с библиотекой.
checkExisting:«uploadify-check-existing.php» — путь к скрипту, который будет проверять наш файл до загрузки его на сервер, пример можно найти в архиве с библиотекой.
auto:false — будут ли файлы автоматически загружаться, сразу после их выбора, или нужно будет стартовать загрузку вручную.
buttonClass:«» — CSS класс который добавится к классу кнопки. По умолчанию класс называется 'uploadifyButton ', если передать значение к примеру Myclass, получится 'uploadifyButton Myclass'.
buttonCursor:«hand» — вид курсора при наведении на кнопку 'hand' или 'arrow'.
buttonImage:false — путь к файлу с изображением для кнопки, либо 'false' если не используете изображение.
buttonText:«SELECT FILES» — текст который будет на кнопке выбора файлов для загрузки
height:30 — высота изображения кнопки.
width:120 — ширина изображения кнопки.
cancelImage:«uploadify-cancel.png» — путь до картинки, которая будет кнопкой для удаления файла из очереди.
debug:false — управление режимом отладки для SWFUpload.
fileObjName:«Filedata» — имя массива загружаемых файлов на сервере, по умолчанию будет массив $_FILES['Filedata']
fileSizeLimit:0 — Ограничение размера загружаемого файла в байтах.
fileTypeDesc:«All Files (*.*)» — список расширений файлов которые будут отображаться в окне выбора файла для загрузки.
fileTypeExts:«*.*» — список расширений файлов которые можно будет загружать.
method:«post» — метод передачи данных в скрипт обработчика. ‘GET’ или ‘POST’.
multi:false — определяет будет ли использоваться мультизагрузка.
queueID:false — id элемента, в котором будет содержаться очередь файлов добавленых для загрузки.
queueSizeLimit:999 — указываеет сколько файлов можно добавить в очередь.
removeCompleted:true — определяет будут ли удаляться файлы из очереди после загрузки.
removeTimeout:3 — время исчезновения файла из очереди после загрузки в секундах.
requeueErrors:true — если значение 'true', то при ошибке загрузке файла он будет загружаться снова и снова. Чтобы избежать бесконечного цикла ставим значение 'false'.
postData:{} — параметры, которые будут отсылаться на сервер вместе с аплоадом файла.
preventCaching:true — отключение кэширования swf файла.
progressData:«percentage» — отображение прогресса загрузки, варианты 'speed' или 'percentage'.
successTimeout:30 — время в секундах, если в течении этого времени от сервера не получено сообщений, загрузка будет считаться успешной.
transparent:true — прозрачность кнопки.
uploadLimit:999 — указывает сколько файлов можно флешлоадер позволит загрузить.
uploaderType:«html5» — тип загрузчика, «html5» или «flash». В даной версии не функционирует.

Вызываемые события:

onClearQueue — функция сработает после очистки очереди файлов
onDialogOpen — при открытии диалога выбора файлов
onDialogClose — при закрытии диалога выбора файлов
onInit — сработает когда инициируется экземпляр Uploadify
onQueueComplete — после загрузки всех файлов из очереди
onSelectError — сработает если файл не был добавлен в очередь
onSelect — срабатывает при каждом добавлении файла в очередь загрузки
onSWFReady — после загрузки флеш файла лоадера
onUploadCancel — сработает при каждом удалении файла из очереди загрузки
onUploadComplete — после успешной загрузки каждого файла
onUploadError — если при загрузке файла произойдет ошибка
onUploadProgress — будет срабатывать при каждом изменении прогресса загрузки
onUploadStart — сработает при старте загрузки
onUploadSuccess — при получении ответа с подтверждением успешной загрузки

Пример использования:

Первым делом само-собой подключаем скрипты библиотеки jQuery, плагина, и стилей,

<script type="text/javascript" src="/js/jquery-1.5.min.js"></script>
<script type="text/javascript" src="/js/uploadify/jquery.uploadify.min.js"></script>
<link href="/css/uploadify.css" media="screen" rel="stylesheet" type="text/css" >
 

и создаем контейнер например с id=«upload_container»

<div id="upload_container"></div>
 

И собственно сам код:

$('#upload_container').uploadify({
        'swf' : 'uploadify.swf',
        'uploader'   :  'uploadify.php',
        'checkExisting':  'uploadify-check-existing.php',
        'multi'   : true,
        'fileTypeExts': '*.jpg',
        'cancelImage': 'images/uploadify-cancel.png',
        'buttonText' : 'Выбрать файлы',
        'onQueueComplete' : function(event,data) {
            alert('Файлы загружены');
        }
});
 

А теперь очень важный момент:
Файлы скриптов плагина на официальном сайте содержат критические ошибки, которые не позволят работать скрипту. По этой ссылке можно скачать архив с исправленой версией плагина.
В заключение добавлю что в будущих версиях плагина автором планируется добавить опцию HTML5 «drag & drop» и сделать наконец-то документацию.
Официальный сайт —

jquery, uploadify, ajax, мультизагрузка

2

30 марта 2011, 02:43

Jaxx