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

Первым делом подключим необходимые скрипты, стили и прочие файлы. Для этого я организовал такую структуру. jquery uploader.
В папке 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="/uploader/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/
example Добавление файлов на сервер без перезагрузки страницы
Собственно сам исходник