Загрузка нескольких файлов на jQuery, с прогрессбаром

Стандартное файловое поле ввода в браузере не поддерживает выбор и загрузку нескольких файлов. Также не показывается сколько файлов выбрано для загрузки на сервер. Ранее описывались разные методы загрузки файлов с помощью ajax, среди которых вкратце рассматривалась мульти загрузка файлов. Но та статья не полностью обозревает принцип работы загрузчиков.

Сегодня мы узнаем как создать свой, полноценный загрузчик нескольких файлов на jQuery. Этот загрузчик позволит выбирать несколько файлов с помощью CTRL/SHIFT а также будет отображать прогрессбар состояния загрузки каждого из файлов.

Для этого урока вам понадобиться библиотека jQuery и SWFUpload плагин к jquery библиотеке.

Структура папок и файлов

Разместите файл jQuery библиотеки в папке js. Также разархивируйте плагин SWFUpload и скопируйте файл jquery.swfupload.js в ресурсную папку js (туда же). Также скопируйте папку swfupload  в ту же папку js. Вот как должна выглядеть структура ваших файлов:

Подключите библиотеку jQuery и плагин jquery.swfupload в head тег вашей страницы.

HTML код

Перед тем как мы будем использовать плагин SWFUpload, нам нужно создать div тег, который будет служить контейнером для кнопки и списка загружаемых файлов.

<div id="swfupload-control">  
    <p>Загружайте до 5 файлов (jpg, png, gif), каждый должен иметь размер максимум 1MB (Используйте Ctrl/Shift для выбора нескольких файлов)</p>  
    <input type="button" id="button" />  
    <p id="queuestatus" ></p>  
    <ol id="log"></ol>  
</div>

CSS стили

Здесь некоторые стили, которые просто украсят ваш загрузчик. Вы можете менять их на свое усмотрение. ВАЖНЫЕ, .progressbar и .progress которые определяют вид прогрессбара загрузки файла, вы можете изменить их высоту и цвет.

#swfupload-control p{ margin:10px 5px; font-size:0.9em; }  
#log{ margin:0; padding:0; width:500px;}  
#log li{ list-style-position:inside; margin:2px; border:1px solid #ccc; padding:10px; font-size:12px;   
    font-family:Arial, Helvetica, sans-serif; color:#333; background:#fff; position:relative;}  
#log li .progressbar{ border:1px solid #333; height:5px; background:#fff; }  
#log li .progress{ background:#999; width:0%; height:5px; }  
#log li p{ margin:0; line-height:18px; }  
#log li.success{ border:1px solid #339933; background:#ccf9b9; }  
#log li span.cancel{ position:absolute; top:5px; rightright:5px; width:20px; height:20px;   
    background:url('js/swfupload/cancel.png') no-repeat; cursor:pointer; }

JavaScript код

JavaScript код выглядит немного пугающе, но он не так сложен как выглядит.

$(function(){  
    $('#swfupload-control').swfupload({  
        upload_url: "upload-file.php",  
        file_post_name: 'uploadfile',  
        file_size_limit : "1024",  
        file_types : "*.jpg;*.png;*.gif",  
        file_types_description : "Image files",  
        file_upload_limit : 5,  
        flash_url : "js/swfupload/swfupload.swf",  
        button_image_url : 'js/swfupload/wdp_buttons_upload_114x29.png',  
        button_width : 114,  
        button_height : 29,  
        button_placeholder : $('#button')[0],  
        debug: false  
    })  
        .bind('fileQueued', function(event, file){  
            var listitem='<li id="'+file.id+'" >'+  
                'File: <em>'+file.name+'</em> ('+Math.round(file.size/1024)+' KB) <span class="progressvalue" ></span>'+  
                '<div class="progressbar" ><div class="progress" ></div></div>'+  
                '<p class="status" >Pending</p>'+  
                '<span class="cancel" > </span>'+  
                '</li>';  
            $('#log').append(listitem);  
            $('li#'+file.id+' .cancel').bind('click', function(){ //удалить из списка загружаемых файлов при нажатии отмены  
                var swfu = $.swfupload.getInstance('#swfupload-control');  
                swfu.cancelUpload(file.id);  
                $('li#'+file.id).slideUp('fast');  
            });  
            // начинаем загрузку 
            $(this).swfupload('startUpload'); 
        }) 
        .bind('fileQueueError', function(event, file, errorCode, message){ 
            alert('Size of the file '+file.name+' is greater than limit'); 
        }) 
        .bind('fileDialogComplete', function(event, numFilesSelected, numFilesQueued){ 
            $('#queuestatus').text('Files Selected: '+numFilesSelected+' / Queued Files: '+numFilesQueued); 
        }) 
        .bind('uploadStart', function(event, file){ 
            $('#log li#'+file.id).find('p.status').text('Uploading...'); 
            $('#log li#'+file.id).find('span.progressvalue').text('0%'); 
            $('#log li#'+file.id).find('span.cancel').hide(); 
        }) 
        .bind('uploadProgress', function(event, file, bytesLoaded){ 
            //Показываем прогрессбар
            var percentage=Math.round((bytesLoaded/file.size)*100); 
            $('#log li#'+file.id).find('div.progress').css('width', percentage+'%'); 
            $('#log li#'+file.id).find('span.progressvalue').text(percentage+'%'); 
        }) 
        .bind('uploadSuccess', function(event, file, serverData){ 
            var item=$('#log li#'+file.id); 
            item.find('div.progress').css('width', '100%'); 
            item.find('span.progressvalue').text('100%'); 
            var pathtofile='<a href="uploads/'+file.name+'" target="_blank" >view »</a>'; 
            item.addClass('success').find('p.status').html('Done!!! | '+pathtofile); 
        }) 
        .bind('uploadComplete', function(event, file){ 
            // загрузка завершена, пробуем загрузить следующий файл в списке 
            $(this).swfupload('startUpload');  
        })    
}); 

Объяснение кода

Начинаем использование плагина SWFUpload с инициализации его на элементе, используем следующую структуру $('#placeholder').swfupload({ settings }). Внутри этой функции устанавливаем все настройки этого плагина в виде объекта: серверный файл скрипта, максимальный размер файла, максимальное количество потоков, допустимые расширения файлов, url картинки кнопки загрузки и ее размеры, и т.д. Чтобы узнать всю перечень настроек, можно почитать документацию к плагину.

На этом этапе, ваш скрипт будет работать, но не будет визуализации для пользователей. SWFUpload предоставляет основные события, которые мы можем использовать для вывода информации пользователям. Следующим этапом будет прикрепление различных функций событий для отображения нужной информации. Эти функции понятны сами по себе, нет потребности их расписывать.

Ограничения

Так как скрипт использует SWFUpload плагин, который основан на flash, убедитесь что в браузере пользователей будет установлен flash player. В ином случае, вам необходимо реализовать альтернативную форму загрузки файлов, без использования flash.

На этом все! Создание мульти загрузчика на jQuery завершено. Остались вопросы и пожелания? Выпишитесь в комментариях внизу!

Источник материала ...

Дальше: JSON формат: создание данных, использование с PHP и JS