Раніше в нашому блозі опублікував пост зі списком AJAX завантажувачів файлів на сервер. Серед них FancyUpload, саме про нього ми і поговоримо в цій статті, а точніше розглянемо, як прикрутити FancyUpload до свого веб-додатком.

Використовуючи FancyUpload ми зможемо завантажувати декілька файлів одночасно, без перезавантаження сторінки. Як відомо, досягається це завдяки технології AJAX. Процес завантаження супроводжуватися анімованим прогрес-баром, щодо естетики можна стилізувати все це справа під інтерфейс свого сайту.

Давайте спробуємо розібратися, що являє собою цей завантажувач. Для роботи завантажувача файлів використовується бібліотека mootols, flash-файл, а так само кілька файлів скриптів javascript.

Завантажити архів ви можете з нашого сайту або з офіційного сайту FancyUpload, різниця може бути в поточній версії (на оф. сайті може бути свіже, ніж тут), а так само в тому, що архів, розміщений тут — русифікований.

В архіві з исходниками знаходитися файл index.html. В його заголовку можна побачити підключення всіх необхідних файлів для роботи завантажувача:

Після підключення цих файлів йде код ініціалізації завантажувача. Відзначимо важливі параметри ініціалізації.
Як говорилося раніше, завантажувач використовує flash файл, в цьому полі вказується розміщення цього файлу.

path: ‘source/Swiff.Uploader.swf’

Так само важливим параметрів є вказівник допустимих типів файлів для завантаження. У демо-файлі прописані:

typeFilter: {
‘Зображення (*.jpg, *.jpeg, *.gif, *.png)’: ‘*.jpg; *.jpeg; *.gif; *.png’
},

При необхідності ви можете підкоригувати цей параметр під свої потреби. Наприклад, щоб додати можливість завантаження файлів Microsoft Word, Excel, додаємо рядок:

‘Документи (*.doc, *.docx,*.xls,*.xlsx)’: ‘*.doc; *.docx; *.xls; *.xlsx’

Так само, швидше за все вам буде потрібно стилізувати завантажувач під свій шаблон, зверніть увагу, що в коді ініціалізації є рядки приблизно такого виду … $(‘demo-status’)…, так от, demo-status це значення id-атрибуту тега, які потрібно так само змінювати в разі його зміни при стилізації, щоб не було помилок з боку javascript.

Підключення файлу стилів:

В тілі сторінки (між тегами ) знаходиться власне сама форма. Обробник форми файл script.php йому належить працювати з AJAX запитами. За замовчуванням файл знаходитися в директорії server. На файл покладається обробка запитів, та інші маніпуляції з завантажуваними файлами на стороні сервера. Дані повертаються у вигляді масиву $return незалежно від того, чи вдало пройшла завантаження чи ні. Для додавання додаткових даних необхідно додати в цей масив свої параметри, (наприклад, $return[‘sub_dir’] = ‘uf4’), після чого у файлі index.html можна звернутися до цього значення, таким чином: json.get(‘sub_dir’).
Папка source містить безліч файлів, серед яких FancyUpload2.js. В даному файлі прописані службові фрази, які використовуються у завантажувачі (значення змінної масиву в phrases), їх так само при необхідності можна виправити на свій розсуд.

У самій формі так само є кілька командних посилань, на які варто звернути увагу:

Вибрати файли |
Очистити список |
Розпочати завантаження

Призначення їх, думаю, вам і так зрозуміло, кожна посилання визначає дію, який виробляє користувач.

Далі слід прогрес-бар, дві шкали, одна служить індикатором загального процесу завантаження, інша для поточного файлу.



При додаванні файлів в чергу завантаження, вони містяться в списку:

    Кожен рядок списку містить коротку інформацію про файлі, ім’я, розмір. Після завантаження файлу в елементах списку так само відображається інформація передана скриптом-обробником в процесі завантаження. Приміром, завантажуючи файл зображення, скрипт на стороні сервера перейменовує файл, і передає нове ім’я назад у форму, додаючи так само деяку інформацію про файл-зображенні.

    На цьому все, думаю у вас вийти розібратися з впровадженням FancyUpload в свій проект.

    DEMO

    Додав: htmaker, 04.06.2014 р.
    (1 голосів, середній: 5,00 з 5)

    Завантаження…

    Діліться з друзями:

    См. також:


    Мета тег robots, приклади використання
    Рубрика: Html, CSS, Javascript, SEO

    Stimed – задаємо CSS-стилі по часу
    Рубрика: Html, CSS, Javascript

    Небезпека використання атрибуту target=”_blank”
    Рубрика: Html, CSS, Javascript, Інф. безпека

    Нескінченна анімація обертання на CSS
    Рубрика: Html, CSS, Javascript

    Анімація обертання при наведенні курсору
    Рубрика: Html, CSS, Javascript

    Стилізація виділення номера телефону до мобільних браузерах
    Рубрика: Html, CSS, Javascript

    Список вибору на JQuery
    Рубрика: Html, CSS, Javascript

    Фіксований заголовок таблиці HTML
    Рубрика: Html, CSS, Javascript

    Ефекти кнопок для сайту
    Рубрика: Html, CSS, Javascript

    Коментарі

  • Олена пише:
    27.04.2016 в 01:04

    Я не можу завантажити файл розміром більше 2 Мб. З’являється повідомлення «Помилка: Розмір завантажуваного файлу не повинен перевищувати 2 Мб».

    Відповісти

  • Діма пише:
    24.05.2016 в 12:06

    Це залежить від налаштувань сервера — напишіть вашому хостингу.

    Відповісти

  • Бо пише:
    27.05.2016 у 03:34

    Все б добре,якби не конфлікт jquery і mootools

    Відповісти