SWFUpload — Простая реализация загрузки нескольких файлов за раз

Библиотека является Java-Script оберткой для Flash ролика который собственно и занимается загрузкой.

Официальный сайт

Возможности:

  • Загрузка нескольких файлов одним кликом
  • Возможность отображать только выбранные расширения в диалоге выбора файлов.
  • Удобный Java-Script API с колбеками на каждое действие.
  • Информация о файле на стороне клиента.
  • Прогресс бар, текущая информация о процессе загрузки.
  • Отображение текущей скорости закачки.
  • Возможность сжатия картинок на стороне клиента
  • Деградация в обычную HTML форму для загрузки, в случае если у клиента не установлен Flash.

Недостатки:

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

Возьмем обычный пример с демо-сайта и разберем:

       var swfu;

window.onload = function() {
    var settings = {
        //Путь к флеш файлу
        flash_url : "../swfupload/swfupload.swf",
        //Путь к бакенду.
        upload_url: "upload.php",
        //По понятным причинам в бакенде, Вы не получите доступа к кукам. Их стоит передать здесь. Например PHPSESSID.
        post_params: {"PHPSESSID" : ""},
        //Лимит размера файла
        file_size_limit : "100 MB",
        //Здесь можно указать разрешенные расширения.
        file_types : "*.*",
        //Текст-подсказка пользователю по разрешенным расширениям.
        file_types_description : "All Files",
        //Максимальное количество загрузок
        file_upload_limit : 100,
        file_queue_limit : 0,
        custom_settings : {
            progressTarget : "fsUploadProgress",
            cancelButtonId : "btnCancel"
        },
        debug: false,

        // Файл картинки кнопки, это спрайт из расположенных друг под другом версий картинки для всех состояний.
        button_image_url: "images/TestImageNoText_65x29.png",
        //Высота, ширина картинки
        button_width: "65",
        button_height: "29",
        //Какой элемент заменяет
        button_placeholder_id: "spanButtonPlaceHolder",
        button_text: '<span class="theFont">Hello</span>',
        button_text_style: ".theFont { font-size: 16; }",
        button_text_left_padding: 12,
        button_text_top_padding: 3,

        // Функции для колбеков, можно использовать готовые, которые идут с библиотекой "handlers.js".
        file_queued_handler : fileQueued,
        file_queue_error_handler : fileQueueError,
        file_dialog_complete_handler : fileDialogComplete,
        upload_start_handler : uploadStart,
        upload_progress_handler : uploadProgress,
        upload_error_handler : uploadError,
        upload_success_handler : uploadSuccess,
        upload_complete_handler : uploadComplete,
        queue_complete_handler : queueComplete    // Queue plugin event
    };

    swfu = new SWFUpload(settings);
};

В HTML части и так все ясно. Подключаем нужные файлы js, css. Создаем форму с нужными id для замены кнопки на Flash ролик и кнопку отмены.

Надеюсь, информация окажется полезной. Если у кого будут проблемы с непосредственным внедрением — пишите я с радостью отвечу.

Posted in Flash, Java-Script | Tagged , , , | 5 Comments