Добавление файлов на сервер без перезагрузки страницы
by Вредный • 25.05.2010 • javascript, jQuery, php, программирование • Комментарии [24]
Сегодня мы с вами научимся загружать файлы на сервер без нажатия кнопки отправить, также мы будем иметь возможность контролировать какие файлы следует, какие нет, загружать исходя из параметров файла. Будем иметь возможность загружать несколько файлов подряд. Исходники вы можете скачать по ссылке в конце этой заметки. Итак, начнем.
Первым делом подключим необходимые скрипты, стили и прочие файлы. Для этого я организовал такую структуру. 
.
В папке scripts хранятся необходимые скрипты, в styles — стили, uploader — flash, который и взаимодействует с браузером, картинка для кнопки отмены загрузки и обработчик на php и папка upload_dir для хранения закачанных файлов.
Сейчас соберем все воедино.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="scripts/jquery.uploadify.v2.1.0.min.js"></script> <script type="text/javascript" src="scripts/swfobject.js"></script> <title>Uploader Test</title> <script type="text/javascript"> $(function() { $('#uploader').uploadify({ 'uploader': 'uploader/uploadify.swf', 'script': 'uploader/uploadify.php', 'folder': 'upload_dir/', 'cancelImg': 'uploader/cancel.png', 'buttonImg': 'uploader/cancel.png', 'auto': true, 'multi': true, 'onComplete': function(event, queueID, f, response, data) { $('#pic').append('<img src="/upload_dir/' + f.name + '" />'); } }); }); </script> </head> <body> <div id="uploader"></div> <div id="pic"></div> </body> </html> |
Кроме подключения необходимых файлов, здесь стоит заострить внимание на строках 12 — 23, в которых мы передаем нашему загрузчику некоторые параметры, а именно:
‘uploader‘ : место, где хранится flash
‘script‘: обрабатывающий скрипт на php
‘folder‘: место куда будут закачиваться загруженные файлы
‘cancelImg‘: картинка для отмены загрузки
‘buttonImg‘: картинка, которая замещает стандартную кнопку ‘Обзор’
‘auto‘: значит, что загрузка будет происходить сразу после выбора файла(ов)
‘multi‘: отмечаем возможность выборки сразу нескольких файлов
‘onComplete‘: обрабатываем событие, произошедшее после выборки файлов, точнее, мы просто отображаем картинку, мне кажется, что очень подойдет для создания каких-нибудь галерей.
Все очень просто, а главное очень функционально. Я доселе не встречал таких компонентов, лишь однократно увидел обсуждение на хабре, в котором говорилось еще об одном похожем компоненте.
Ссылка на сайт плагина http://www.uploadify.com/
Собственно сам исходник
спасибо за скрипт,очень помог(долго мучался сам)
но не подскажешь как можно еще добавить мультизагрузку и не автоматическую загрузку?
прости немного ошибся,пробовал подставить загрузку в ручную а не автоматом,да и что-то не выходит
в параметрах нужно указать, помимо всего прочего
«multi» : true,
«auto» : false
тогда появится возможность выборки сразу нескольких файлов и предотвратит автоматическую загрузку
дополнительные параметры вы можете посмотреть по ссылке: http://www.uploadify.com/documentation/
если не получится обращайся, вместе решим
спасибо огромное,всё работает(и спасибо за твой блог буду обращаться)
всегда пожалуйста =)
2 дня промучался с этим скриптом и понял что знаний js хватает. У меня проблема связать submit формы загрузки самого файла и передачи данных в другую функцию. Можете показать как это реализовать.
Пробовал делать
То форма отправляется раньше чем файл успевает загрузиться. У меня ступор полный
блин теги режет, не могу пример прицепить
напиши мне на почту dnd[точка]pliz[собачко]yandex.ru
обрамлять попробуй код тегами <code>
Вредный, а что за редактор ты юзаешь? Он бесплатный?
использую исключительно NetBeans
спасибо
тоже попробую netBeans
а что за библиотека swfobjects в данном примере?
подключающая flash загрузку, стандартными средствами JS этого не сделаешь
странно, у меня почему-то не запускается файл прописанный в script, хотя onComplete срабатывает =(
$(function() {
$(‘#uploadify’).uploadify({
‘uploader’ : ‘/flash/uploadify.swf’,
‘script’ : ‘/admin/scripts/products/uploadify.php’,
‘folder’ : ‘/data/products/images/carousel/{id}/’,
‘buttonText’ : ‘browse’,
‘cancelImg’ : ‘/i/uploadify/cancel.png’,
‘queueID’ : ‘uploadifyFileQueue’,
‘auto’ : true,
‘fileExt’ : ‘*.jpg;*.png;*.gif’,
‘fileDesc’ : ‘*.jpg, *.png, *.gif’,
‘sizeLimit’ : 64000,
‘onComplete’: function(event, queueID, f, response, data) {
console.info(f.name);
}
});
});
сорри, разобрался
— файл выполнялся
а можно как-ть повесить uploadify не на один input type=file, а сразу на несколько?
когда я делаю вот так:
$(‘#uploadImagesBlock input:file’).uploadify({…})
у меня несколько input’ов заменяются всего одной кнопкой «browse», а хочется чтобы на каждый Input было по кнопке
еще нельзя задисаблить кнопку browse
да решение конечно не универсальное, но я пока ничего лучше не нашел, если вдруг встретите буду признателен, если поделитесь
Тащемто можно, но не без уличной магии.
2
3
'buttonImg': 'uploader/disablebrowse.png',
'fileDesc' : 'jpg;png;gif',
Собстно disablebrowse.png меняем на нужное вам.
????
Profit.
Всё конечно отлично, но строка 21
ИМХО должна быть такой. Во всяком случае у меня только так работает.
И в папке upload_dir после распаковки 2 sql файла на 400 кил. Они действительно так нужны?
Отличный урок. Долго искал такой.
Конечно вы правы, исправил
Файлы в папке вряд ли нужны, это, скорее всего, мои эксперименты
Хороший блог. Есть что почитать.
Где-то я это уже читал. Но все-равно неплохо.