Некоторое время назад, я столкнулся с проблемой выбора плагина для загрузки файлов через Ajax. У меня был некоторый набор критериев, по которым я выбирал плагин. В связи с этим, решил представить результаты своих исследований этого вопроса. Думаю, многим эта информация будет полезна.


1. Плагин AJAX Upload Эндрю Волмса.



Простой ajax плагин для загрузки файлов. Преимущества:

a) Поддерживает множественную(использует XHR) загрузку файлов с индикатором загрузки в FF 3.6+, Safari 4+, Chrome, в других браузерах использует невидимые iframe.

b) Драг энд дроп поддерживается в FF 3.6+ и Chrome.

c) Возможно использование без jQuery.

d) Не использует Flash.

e) Возможна отмена загрузки.

f) Фильтрация по типам

g) Работает с https

h) Возможна установка ограничений на размер файла.

i) Поддерживает клавиатурные вызовы в FF, Chrome, Safari .

j) Проверен в IE 7,8; Firefox 3,3.6,4; Safari 4,5; Chrome; Opera 10.60;

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

var uploader = new qq.FileUploader({

// путь к элементу DOM (в jQuery следует использовать $(selector)[0])

element: document.getElementById('file-uploader'),

// путь к серверному скрипту

action: '/server/upload'

// дополнительная информация в формате ключ-значение

params: {},

// Проверка расширения

// формат ['jpg', 'jpeg', 'png', 'gif'] или []

allowedExtensions: [],

// лимит размера каждого файла в байтах

// эта опция поддерживается не во всех браузерах

sizeLimit: 0, // максимальный

minSizeLimit: 0, // минимальный

// установите это значение равным true, для вывода в консоль ответа сервера

debug: false,

// события

// можно вернуть false, чтобы прервать загрузку

onSubmit: function(id, fileName){},

onProgress: function(id, fileName, loaded, total){},

onComplete: function(id, fileName, responseJSON){},

onCancel: function(id, fileName){},

messages: {

// настройка сообщений об ошибке

},

// настройка отображения сообщений

showMessage: function(message){ alert(message); }

});



Плагин распространяется под лицензиями GNU GPL и GNU LGPL 2, как продукт с открытым исходным кодом.

Скачать его можно здесь.

Домашняя страница плагина http://valums.com/ajax-upload/.

2. Plupload



Plupload может работать на любой из следующих рантайм сред: Flash, HTML 5 Gears, HTML 5, Silverlight, BrowserPlus, HTML 4(в этой версии недоступно большинство фич).

Преимущества:

a) Поддерживает Multipart загрузку (в HTML 5 только для Gecko и WebKit).

b) Индикатор загрузки(кроме HTML 4)

c) Драг энд дроп(кроме Flash, Silverlight, HTML 4).

d) Возможность изменения размера картинок в форматах png и jpeg.

e) Загрузка по-частям(не поддерживается в HTML 4, в HTML 5 поддерживается только для Chrome и Firefox 4+)

f) Фильтрация по типам (кроме HTML 4)

g) Потоковая загрузка (кроме HTML 4 и BrowserPlus)

h) Возможна установка ограничений на размер файла.

i) Возможность настройки отсылаемых заголовков

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

var uploader = new plupload.Uploader(

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

runtimes : 'gears,html5,flash,silverlight,browserplus',

//Строковое значение идентификатора кнопки «Просмотр». Flash, HTML 5 и Silverlight накладывают невидимый слой поверх кнопки, для этого в данных рантаймах необходим идентификатор кнопки.

browse_button : 'pickfiles',

//Максимальный размер файла, который может выбрать пользователь. Эта строка может быть в одном из следующих форматов 100b, 10kb, 10mb.

max_file_size : '10mb',

//Позволяет приводить картинки к заранее заданному размеру и качеству.

resize : {width : 320, height : 240, quality : 90},

//URL на который будет производиться загрузка.

url : 'upload.php',

//URL по котрому находиться SWF-файл для Flash рантайма.

flash_swf_url : '/plupload/js/plupload.flash.swf',

// URL по котрому находиться XAP-файл для Silverlight рантайма.

silverlight_xap_url : '/plupload/js/plupload.silverlight.xap',

//Список фильтров, которые можно применять при выборе файлов для загрузки. А конкретно, это фильтры по расширениям файлов. Для каждого фильтра есть два параметра: название и расширения.

filters : [

{title : "Файлы изображений", extensions : "jpg,gif,png"},

{title : "Zip-архивы", extensions : "zip"}

]

});


Плагин распространяется под лицензиями GNU GPL, а так же под платными лицензиями.

Скачать бесплатную версию можно здесь.

3. Плагин AjaxFileUpload.




Этот платин не имеет графического интерфейса. Его преимущества:

a) Не использует Flash.

b) Удобная интеграция в любое веб-приложение.

c) Кроссбраузерность (все что необходимо для его работы поддержка Ajax и включенный JavaScript).

d) Возможна работа через https

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

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

   function ajaxFileUpload() {

//Добавляем анимацию на начало и окончание ajax-запроса

$("#loading")

.ajaxStart(function(){

$(this).show();

})

.ajaxComplete(function(){

$(this).hide();

});

/*

Подготавливаем ajax-загрузку файла

url: ресурс, обрабатывающий загруженный файл

fileElementId: имя поля ввода типа “file” из которого будет загружаться файл, а так же индекс в массиве $_FILES(для php).

dataType: тип данных(json или xml)

secureuri: использование защищенного соединения

success: колбек-функция для случая успешного завершения ajax-запроса

error: колбек-функция для случая неуспешного завершения ajax-запроса

*/

$.ajaxFileUpload

(

{

url:'doajaxfileupload.php',

secureuri:false,

fileElementId:'fileToUpload',

dataType: 'json',

success: function (data, status)

{

if(typeof(data.error) != 'undefined')

{

if(data.error != '')

{

alert(data.error);

}else

{

alert(data.msg);

}

}

},

error: function (data, status, e)

{

alert(e);

}

}

)

return false;

}



Скачать его можно здесь.

4. Uploadify



Uploadify существует в двух вариациях, для HTML5 и Flash, доступны методы для обработки случаев несовместимости с браузером.

Имеет следующие преимущества:

a) Множественная загрузка

b) Драг энд дроп(для HTML 5-версии).

c) Индикатор загрузки

d) Настраиваемые фильтры (количество файлов, лимит размера, фильтрация по типам, ограничения по количеству одновременных загрузок)

e) Значительные возможности для кастомизации

$(function() { 

$('#file_upload').uploadify({

//отправлять ли файлы автоматически при добавлении в очередь(по умолчанию true)

'auto' : false,

//стиль кнопки

'buttonClass' : 'upload',

//стиль курсора над кнопкой

'buttonCursor' : 'pointer',

//картинка кнопки

'buttonImage' : '/images/button.gif',

//текст кнопки

'buttonText' : 'upload',

//путь к скрипту проверяющему наличие загружаемого файла

'checkExisting' : 'fileExists.php',

// позволяет включить отладочный режим SWFUpload(по умолчанию отключен).

'debug' : true,

// имя под которым файл будет находиться в массиве полученных

'fileObjName' : 'the_files',

// максимальный размер отправляемого файла

'fileSizeLimit' : '100KB',

// описание загружаемого файла

'fileTypeDesc' : 'Файлы изображений ',

// расширение загружаемого файла

'fileTypeExts' : '*.gif; *.jpg; *.png',

// JSON-объект отсылаемый вместе с файлом

'formData' : {'someKey' : 'someValue', 'someOtherKey' : 1},

// высота кнопки в пикселях

'height' : '50',

// настраиваемый HTML-шаблон представления элементов в очереди загрузки

'itemTemplate' : '<div id="${fileID}" class="uploadify-queue-item">\

<div class="cancel">\

<a href="javascript:$('#${instanceID}').uploadify('cancel', '${fileID}')">X</a>\

</div>\

<span class="fileName">${fileName} (${fileSize})</span><span class="data"></span>\

</div>',

// метод отправки формы через протокол HTTP, возможные значения: get и post

'method' : 'post',

// этот параметр указывает, возможна ли загрузка нескольких файлов, значение по умолчанию true

'multi' : false,

// массив событий, для которых будет отключен обработчик по умолчанию

'overrideEvents' : ['onUploadProgress'],

// добавляет случайную строку к SWF файлу за счет чего он не кешируется, значение по умолчанию true

'preventCaching' : false,

// указывает в каком виде отображать информацию о загрузке: процент либо скорость загрузки

'progressData' : 'speed',

// идентификатор DOM-элемента, в котором следует отображать очередь загрузки

'queueID' : 'some_file_queue',

// максимальное количество файлов, которые одновременно могут быть в очереди на загрузку

'queueSizeLimit' : 5,

// в случаи если этот параметр установлен в false, файлы не удаляются из очереди после загрузки

'removeCompleted' : false,

// время, в секундах, по прошествии которого, загруженные файлы удаляются из очереди

'removeTimeout' : 10,

// в случаи если этот параметр установлен в true, файлы, которые не удалось загрузить, ставятся в очередь повторно, значение по умолчанию false

'requeueErrors' : true,

// время, прошедшее с момента загрузки файлов, после которого, в случаи отсутствия ответа, загрузчик считает, что файл успешно загружен

'successTimeout' : 20,

// путь к файлу uploadify.swf

'swf' : 'uploadify.swf',

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

'uploader' : 'uploadify.php',

// максимальное количество файлов, которое можно загрузить

'uploadLimit' : 100,

// ширина кнопки в пикселях

'width' : 200

});

});




Flash-версия распространяется по лицензии MIT. Скачать можно здесь.

Домашняя страница плагина http://www.uploadify.com.
3

Комментарии

Для того, чтоб оставлять комментарии или зарегистрируйтесь.