Говорят, что создание сайта - очень длительный и трудоемкий процесс. Мы скажем - НЕТ! Ведь с новыми технологиями, такими как HTML5, CSS3, PHP и MySql можно быстро и легко научиться создавать сайты любой сложности.
Два сумасшедших веб-мастера покажут где что лежит и как этим пользоваться.
Авторизация
Новый
Забыл
Пожалуйста, заполните поля выше. Это нужно сделать обязательно, иначе ничего не получится.
JavaScript и Jquery /

SWFUpload + jQuery: интересный файловый загрузчик

  • Среда, 27 октября 2011, 03:45 |
  • Автор: karpovi4 |
  • Просмотров: 3961 |
  • Комментарии: 2 |
  • В закладки:
На этот раз будем будем использовать js-библиотеку SWFUpload и jQuery.

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

SWFUpload дает полную свободу разработчику в имплементации внешнего вида загрузчика. Свобода ограничивается только вашим знанием CSS и HTML.
Этой свободой-то мы и воспользуемся) В общих чертах - займемся "объединением" кнопки выбора файла и индикатора загрузки. (Идея позаимствована у WIN 7 )

СКАЧАТЬ ИСХОДНИК - swfupload-jquery.zip [48 Kb] (cкачиваний: 313)

Внешний вид нашей разработки:
SWFUpload + jQuery: интересный файловый загрузчик


Перейдем непосредственно к исходникам.

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
Мы задаем настройки загрузчика - количество допустимых файлов, дозволенные форматы, ограничение на размер и объявляем хендлеры для разных этапов процесса загрузки.
 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. У первой функции два основных параметра. Один - Состояние загрузки файлов. Второй - его размер. Простой функцией мы преобразовываем загруженные байты в закрашенные части на индикаторе.
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) {

    }
}

Со второй функцией думаю проблем не возникло) Удачи вам.
  • Пишет: Krystalyn (Гости) |
  • Сообщений: 0 |
  • 20 сентября, 19:09
  • #1
We could've done with that isngiht early on.
Добавить комментарий