В последнее время стало популярным взаимодействия с сервером без перезагрузки страницы. Это удобно тем, что во первых изменяется только часть веб страницы, что довольно сильно может экономить время загрузки страницы и трафик.
В этой записи я покажу как можно загружать файлы без перезагрузки странице. Без данного функционала не обойтись например, в веб приложениях где очень не желательна перезагрузка. Например на сайтах где все данные получаются с помощью ajax. Не очень красиво будет если все получаем без перезагрузи, а загружаем файлы с перезагрузкой страницы. Эту проблему нам поможет решить отличный jquery плагин — Uploadify.
Пользоваться этим плагином довольно легко. Для подключение к веб страницы используем следующей код -
<script type="text/javascript" src="/Window1/uploadify/jquery.uploadify.v2.1.0.min.js"></script>
следующим шагом подключаем такой код -
$(document).ready(function() {
$("#uploadify").uploadify({
'uploader' : '/example/jquery.uploadify-v2.0.3/uploadify.swf',
'script' : '/example/jquery.uploadify-v2.0.3/uploadify.php',
'folder' : '/constructor/uploads',
'cancelImg' : 'cancel.png',
'folder' : 'uploads',
'queueID' : 'fileQueue',
'auto' : true,
'multi' : false,
'onComplete' : function(event,queueID,fileObj,response,data) {
$('#file').html(response);
},
'fileDesc' : 'jpg; gif; png; jpeg;',
'fileExt' : '*.jpg;*.gif;*.png;*.jpeg;',
'width' : '542',
'height' : '29'
});
});
</script>
опишу тут главные параметры. -
uploader – относительный путь к файлу uploadify.swf. Чтобы был абсолютный путь поставьте вначале пути – /. В моем примере абсолютный путь от корня сайта.
Script – относительный путь к файлу сервера который обрабатывает файл который закачан на сервер.
CheckScript – путь к файлу который проверяет если ли такой файл на сервере.
ScriptData – Объект в котором содержится пара — имя/значение. Тут можно послать дополнительные значения в серверный скрипт. Отсылать нужно в таком виде – {‘имя’: ‘значение’}
fileDataName — имя массива загружаемого файла на сервере. В нашем случае это будет в файле /example/jquery.uploadify-v2.0.3/uploadify.php. Так как по умолчанию значение «Filedata» и мы не меняли на другое поэтому у нас в скрипте будет массив – $_FILES['Filedata'].
Method – Метод передачи данных в серверный скрипт. Возможные значения ‘GET’ или ‘POST’. В нашем случае стоит ‘POST’ так как мы этот параметр явно не прописывали.
ScriptAccess – режим доступа скриптам в флеш файл. При локальном тестирование можно поставить ‘always’. По умолчанию стоит – ’sameDomain’.
Folder – папка в которую мы хотим сохранять файлы на сервере. В php cкрипте доступна через переменную – $_REQUEST['folder'].
QueueID – id элемента который нужно использовать в качестве очереди файла. По умолчанию создается автоматически ниже кнопки ‘Browse’ .
QueueSizeLimit – Лимит количества элементов которые будут в очереди за один раз. По умолчанию 999.
multi – для множественной загрузки установите «true» .
Auto – установите «true» если вы хотите чтобы файл загружался сразу как только вы его выберите.
FileDesc – текст который появится внизу когда вы нажмете кнопку для выбора файла на локальном компьютере. В нашем случае значения ‘jpg; gif; png; jpeg;’ для того чтобы видеть какие типы файлы можно выбрать.
FileExt – список расширений файлов которые можно будет загружать. В моем случае такой ‘*.jpg;*.gif;*.png;*.jpeg;’ . Звездочкой обозначаем любой текст, а после точки расширение файла.
SizeLimit — лимит в байтах для каждой загрузки на сервер.
SimUploadLimit — количество разрешенных одновременных загрузок на сервер. По умолчанию 1
buttonText – текст который может появится на кнопке, что по умолчанию для выбора файла. По умолчанию ‘BROWSE’.
ButtonImg – если не устраивает кнопка, что по умолчанию. Можно тут прописать путь до изображения которую вы хотите использовать как кнопку для выбора файла.
HideButton — если вы хотите спрятать кнопку изображения установите в true
width – ширина кнопки изображения. По умолчанию 30
height — высота изображения кнопки.
cancelImg – путь к кнопки для отмены. По умолчанию ‘cancel.png’
onOpen — функция которая выполняется каждый раз как файл открыт для загрузки flash файлом. Например – ‘onOpen’ : function(event,queueID,fileObj) { }
onComplete – функция выполняется каждый раз как определенный файл загружен. В нашем случае мы вызываем анонимную функцию:
описание к важным аргументам :
queueID – уникальный идентификатор файла который загружен
fileObj – обьект который содержит детальные данные о файле который загружен:
name – имя файла
filePath – путь на сервере к загруженному файлу
size – размер в байтах
creationDate – дата создания файла
modificationDate – дата модыфикации файла
type – расширение файла
response – данные которые возвращяет сервер.
OnAllComplete — функция которая выполняется когда все файлы загружены.
Полную документацию вы можете найти тут — http://www.uploadify.com/documentation/.
Последнюю версию плагина можно скачать тут – http://www.uploadify.com/download/.
Andrew on Август 9th, 2010
А Вы проверяли на кроссбраузерность?