Міні-форма вивантаження файлів AJAX

22

Від автора: Підручник про те, як відтворити выскальзывающее бічне меню-колонку, яке можна побачити на сайті GoogleNexus 7.

У цьому підручнику ми збираємося створити форму вивантаження файлів AJAX, яка дозволить користувачам вивантажувати файли зі своїх браузерів, просто перетягнувши/відпустивши або вибравши їх індивідуально. У цих цілях ми комбінуємо потужний плагін jQuery File Upload з акуратним jQuery Knob і уявимо гладкий інтерфейс під управлінням CSS3/JS.

Міні-форма вивантаження файлів AJAXМіні-форма вивантаження файлів AJAX

HTML

Як завжди, почнемо з базового документа HTML5:

Mini Ajax File Upload Form

Drop Here
Browse

У початок документа я включив два шрифту з Google Webfonts, а перед закриттям тега body ви бачите декілька бібліотек JavaScript. Це бібліотека jQuery, плагін jQuery Knob і залежності для плагін jQuery File Upload. Основний елемент сторінки – форма #upload. Всередині неї знаходиться div #drop (приймаючий вивантаження drag/drop) і невпорядкований список. В цьому списку буде міститися елемент li для кожного з переносимих файлів. Нижче наведена згенерована розмітка вивантаження файлу:

  • Sunset.jpg 145 KB

  • Елемент input у вищенаведеному фрагменті схований за допомогою CSS. Єдине його призначення – ініціалізувати плагін jQuery Knob, який створить гарний елемент завантаження (кругову шкалу). У input є кілька атрибутів data-*, модифікуючих її зовнішній вигляд. Пізніше, слухаючи прогрес вивантаження файлу, ми оновимо значення цього input, що викличе перемальовування шкали. Діапазон справа є іконка; це може бути або позначка-«галочка», або червоний хрестик.

    Міні-форма вивантаження файлів AJAX

    Код jQuery

    З допомогою цієї форми можна вивантажувати файли двома способами:

    Відпустивши їх у div #drop (у всіх браузерах, крім IE);

    Клацнувши по кнопці «обзор». Так симулюється клацання з прихованого input файлу, який виводить вікно пошуку файлів системи. Зверніть увагу, що у input файлу є набір безлічі параметрів, який дозволяє вибрати зараз більше одного файлу (файли однак все одно будуть завантажуватися індивідуально!).

    Поведінкою за замовчуванням цього плагіна є розміщення файлів в чергу, але ми зробимо так, щоб файли вивантажувалися автоматично після вибору/перетягування. Нижче можна подивитися JS:

    assets/js/script.js

    $(function(){
    var ul = $(‘#upload ul’);
    $(‘#drop a’).click(function(){
    // Симулируйте клацання по кнопці введення файлу
    // для відображення діалогового вікна браузера файлів
    $(this).parent().find(‘input’).click();
    });
    // Ініціалізувати плагін jQuery File Upload
    $(‘#upload’).fileupload({
    // Цей елемент прийме вивантаження файлу drag/drop
    dropZone: $(‘#drop’),
    // Ця функція викликається, коли файл додається в чергу;
    // або через кнопку «browse», або перетягнути/відпустити:
    add: function (e, data) {
    var tpl = $(‘

  • ‘);
    // Прикріпіть ім’я і розмір файлу
    tpl.find (p’).text(data.files[0].name)
    .append(» + formatFileSize(data.files[0].size) + «);
    // Додайте HTML до елемента UL
    data.context = tpl.appendTo(ul);
    // Ініціалізувати плагін knob (кругову шкалу завантаження)
    tpl.find(‘input’).knob();
    //Слухайте клацання по іконці скасування
    tpl.find(‘span’).click(function(){
    if(tpl.hasClass(‘working’)){
    jqXHR.abort();
    }
    tpl.fadeOut(function(){
    tpl.remove();
    });
    });
    // Автоматично завантаження файл, як тільки він додається в чергу
    var jqXHR = data.submit();
    },
    progress: function(e, data){
    // Підраховуйте відсоток виконання вивантаження
    var progress = parseInt(data.loaded / data.total * 100, 10);
    // Оновіть прихований input і запустіть зміна
    // для того, щоб плагін jQuery knob знав, що потрібно оновити кругову шкалу
    data.context.find(‘input’).val(progress).change();
    if(progress == 100){
    data.context.removeClass(‘working’);
    }
    },
    fail:function(e, data){
    // Що щось пішло не так!
    data.context.addClass(‘error’);
    }
    });
    // Запобіжите дія за замовчуванням, коли файл відпускається у вікні
    $(document).on(‘drop dragover’, function (e) {
    e.preventDefault();
    });
    // Допоміжна функція, форматирующая розміри файлу
    function formatFileSize(bytes) {
    if (typeof bytes !== ‘number’) {
    return «;
    }
    if (bytes >= 1000000000) {
    return (bytes / 1000000000).toFixed(2) + ‘GB’;
    }
    if (bytes >= 1000000) {
    return (bytes / 1000000).toFixed(2) + ‘MB’;
    }
    return (bytes / 1000).toFixed(2) + ‘KB’;
    }
    });

    Бібліотека jQuery File Upload укомплектована власним дизайном jQuery, керованим інтерфейсом, яким можна користуватися. Однак, так як нам потрібен повністю настроюваний інтерфейс, ми скористаємося не включає його базової версії плагіна. Щоб вона запрацювала, передаємо кілька опцій/зовнішніх викликів конфігурації. У наведеному вище коді це:

    dropZone – це властивість містить селектор jQuery елемента, який буде діяти як об’єкт-приймач. Опускаються в нього файли будуть додаватися в чергу вивантаження.

    add – ця функція зовнішнього виклику викликається при додаванні файлу в чергу. Всередині неї ми створюємо розмітку, яка буде представляти файл, додаємо її в UL і запускаємо метод data.submit(). Він без зволікання викличе пряму вивантаження доданого файлу.

    progress – цей зовнішній виклик виконується плагіном кожні 100 мс (настроюється). Другий аргумент (атрибут data) містить розмір файлу і кількість переданих байтів. Це дозволяє нам підрахувати відсоток виконання і згодом оновити прихований елемент input, який в свою чергу оновлює шкалу.

    fail – ця зовнішня функція виконується, якщо з вашим PHP скриптом виникла проблема. Швидше за все, це буде означати, що upload.php відсутня або видає якусь помилку (для виправлення потенційних проблем скористайтесь інспектором свого веб-браузера).

    Дивіться повний список доступних опцій конфігурації на цій сторінці. Я включив ще кілька джерел інформації про плагіні в розділ Ресурси та додаткова інформація в кінці цього підручника.

    Властивість data.context між викликами цього методу плагіна зберігається. Таким чином ми дізнаємося, який пункт LI потрібно оновлювати при подіях прогресу і збою закачування.

    Скрипт PHP

    jQuery File Upload також укомплектований потужним PHP скриптом для управління вивантаження файлів, який можна розмістити на своєму сервері, але в цьому підручнику ми створимо свій власний. Вивантаження файлів, що посилаються плагіном, практично ті ж самі, що і при вивантаженні звичайної форми – отримати інформацію про вивантаження можна через масив $_FILES:

    Як я вже раніше згадував, хоча можна вибрати відразу декілька файлів, вивантажуються вони один за іншим. Так їх набагато легше контролювати за допомогою нашого скрипта PHP. Зараз файли просто переміщаються в папку uploads, але можна розширити її, додавши в базу даних аутентифікацію або створення записів.

    От і все! Сподіваюся, вам знадобиться ця форма вивантаження файлів ajax! Якщо у вас виникли пропозиції або питання, залиште їх в області коментарів.