Для начала поясню, кто такой SWFUpload и зачем он может быть нужен.

Итак, SWFUpload - это js-библиотека, обертка для флэш-объекта, который позволяет загружать файлы. Только в отличие от обычного файл-аплода, флэш радует нас возможностью выбирать несколько файлов, получать информацию о процессе загрузки и на клиенте оценивать размер и формат выбранных файлов.

SWFUpload дает полную свободу разработчику в имплементации внешнего вида загрузчика - свобода, которая может быть ограничена разве что знанием HTML+CSS.

Собственно, этой свободой я и решил воспользоваться, когда моя мысль добрела до идеи.

Идея заключается в том, чтобы индикатор загрузки и кнопку выбора файла объединить.

Светлая мысль о том, что индикатор можно впиндюрить в элемент, который уже обладает привычным функционалом, не в мою голову пришла первая. Вот замечательный пример интерфейса Виндуз 7:

Не мешает, всегда видно. Красиво и удобно.

Внешний вид того, что будем делать мы:

Лоутек:

Хайтек:

HTML:

<div id="Buttons">
    <span id="UploadPhotos">
        <input type="button" id="Progress" /><i id="fAddPhotos"></i><input type="button"
            id="AddPhotos" value="Upload Photos" />
    </span>
</div> <script type="text/javascript">
    window.onload = function() { BindSWFUpload();} </script>

 CSS:

 #Buttons {
    padding: 0;
    position: relative;
    color: #666666;
    width: 200px;
    text-align: left;
    margin: 200px auto 0;
}
#UploadResult{
    padding: 0 10px;
}
input#AddPhotos {
}
#Buttons span {
    line-height: 32px;
}
#Buttons input, .niceButton {
    border-style: none;
    border-color: inherit;
    border-width: 0;
    background: url('../images/btn.png') no-repeat 0 -32px;
    color: #666666;
    font-size: 14px;
    height: 32px;
    width: 115px;
    cursor: pointer;
    outline: none;
    text-decoration: none;
    line-height: 32px;
}
#Buttons input:hover, #Buttons input.hover, .niceButton:hover {
    background-position: 0 0;
    color: #333;
    outline: 0 none;
}

#Buttons object {
    outline: none;
    position: absolute;
}
input#Progress
{
    background: url('../images/progress.png') no-repeat 0 0px;
    width: 115px;
    height: 32px;
    position: absolute;
    width: 0;
    padding: 0;
}

JS:

Метод, инициирующий наш флэш-загрузчик BindSWFUpload. В нем мы задаем настройки загрузчика - количество допустимых файлов, дозволенные форматы, ограничение на размер и объявляем хендлеры для разных этапов процесса загрузки.

 var swfuPhotos;
function BindSWFUpload() {
    var swfuPhotosSettings = {
        file_dialog_complete_handler: photos_fileDialogComplete,
        upload_progress_handler: photos_uploadProgress,
        upload_success_handler: photos_uploadSuccess,
        upload_complete_handler: photos_uploadComplete,
        swfupload_loaded_handler: swfuploadLoaded,
        file_queue_error_handler: photos_fileQueueError,
        file_size_limit: "2 MB",
        file_types: "*.jpg;*.png",
        file_types_description: "JPG, PNG images",
        file_upload_limit: "5",
        button_placeholder_id: "fAddPhotos"
    }

    var defaultSettings = {
        flash_url: "files/swf/swfupload.swf",
        upload_url: "upload.php",
        post_params: {
            "ASPSESSID": ASPSESSID
        },

        button_width: 115,
        button_height: 32,
        button_image_url: "files/images/white50.png",

        button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,
        button_cursor: SWFUpload.CURSOR.HAND
    }

    swfuPhotos = new SWFUpload($.extend(swfuPhotosSettings, defaultSettings));
} 

Ну а теперь подробнее о самом процессе. Рассмотрим две функции - uploadProgress и uploadSuccess. Первый из них отслеживает состояние загрузки файлов - у него два параметра: файл и объем загруженных байт. Несложной функцией мы преобразуем этот объем байт в часть индикатора загрузки, который, в свою очередь, разбит на n частей, где n - количество загружаемых файлов.

var Count = 0;
var UploadedFiles = 0;   
function photos_uploadProgress(file, bytesLoaded) {
    try {
        var pw = 115;
        var w = Math.ceil(pw * (UploadedFiles / Count + (bytesLoaded / (file.size * Count))));
        $('#Progress').stop().animate({ width: w });
    } catch (ex) {
    }
}
function photos_uploadSuccess(file, serverData) {
    try {
        UploadedFiles++;
    } catch (ex) {

    }
}

 В остальных хэндлерах нету ничего особенного, поэтому сюда их копипастить не буду.

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

Демо Скачать

Понравилась статья? Ретвит!