Завантаження зображень
додаток
Завантаження зображень невід'ємна частина будь-якої веб-програми, і веб-розробник завжди намагається зробити її найбільш зручною для користувача.
Стандартна HTML форма не дає нам можливість спостерігати за процесом завантаження та й до того ж дані вирушають із перезавантаженням сторінки, це дуже незручно. В інтернеті можна знайти безліч плагінів, щоб доопрацювати стандартну форму та реалізувати зручнішу відправку даних. Однак можна обійтися без сторонніх плагінів, реалізувавши форму завантаження, використовуючи бібліотеку Jquery.
Надсилання зображення на сервер, без перезавантаження документа
Створіть сторінку, у заголовку підключіть бібліотеку jquery, в тіло документа вставте форму з унікальним ідентифікатором id="formupload".
Далі необхідно створити обробник подій на js, який відловлюватиме момент відправлення форми, обробляти її дані і вже за допомогою Ajax відправляти їх (наше зображення) на сервер.
У заголовок документа після підключення бібліотеки Jquery вставимо наступний js код.
Код спрацьовує, коли користувач натискає кнопку “Завантажити”. Форма намагається надіслати дані на сервер, проте наш обробник подій відловлює цей момент.
Скрипт зчитує властивості зазначені у формі (метод відправки та шлях до серверного сценарію). Далі використовуючи об'єктFormData, готується форму для відправки їїAjax запитом. Функція, опції success, виконається у разі успішного відправлення форми та отримання результату від серверного сценарію у форматі json , т.к. dataType: "json" (Серверний сценарій буде розглянутий нижче, але заздалегідь хочу пояснити, що в результаті успішного завантаження зображення від сервера приходить шлях до картинки, в змінній filelink). Далі створюється новийелемент , якому присвоюється шлях завантаженого зображення та міститься у форму.return false ; в кінці функції запобігає надсилання форми, а значить і перезавантаження сторінки.
Серверний сценарій обробки зображень
Дані форми надсилаються на сервер, де вони будуть обробленіphp скриптом вказаним у параметрі url функції $.ajax. Далі розташований базовий обробник (код взятий із сайту imperavi.com)
Індикатори завантаження або прелоадери
На даному етапі у нас вже готове завантаження зображення, але все ж є незручність т.к. Користувач не має візуального спостереження за процесом завантаження.
Далі представлені два варіанти прелоадера:
Статичний індикатор
Статичний, т.к. він не дає уявлення про кількість завантажених даних, а лише з'являється на сторінці в момент оправлення даних на сервер, і ховається, коли дані надіслані. Як індикатор можете створити gif зображення, за допомогою одного зі спеціалізованих онлайн сервісів, наприклад ajaxload.info
Вставте у форму або інше місце на сторінціhtml код прелоадера, в даному випадку у форму доданий блок
Також необхідно внести зміни в js скрипт, додавши методиajaxStart іajaxStop, відповідно код, що знаходиться в першому, буде виконуватися на початку виконання ajax запиту, другий при його зупинці.
І додатиCSS стиль, що приховує прелоадер при початковому завантаженні документа.
Динамічний індикатор завантаження
Динамічний індикатор на відміну статичного, показує користувачеві відсоток завантажених даних.
HTML & CSS: Для створення найпростішого "прогресу бару" нам знадобиться два блоки
JS: Щоб отримати інформацію про кількість завантажених данихскористаємося об'єктомXMLHTTPRequest. Далі представлена функція, за допомогою якої можна слухати сервер для отримання даних про процес завантаження. Змінна відсотокComplete, розраховує скільки даних вже завантажено.
Поєднавши всі разом, отримаємо наступний код:
За бажанням, ви можете поєднувати два типи прелоадера разом.
Розмір файлу, що завантажується
Іноді буває необхідно дізнатися розмір файлу, що завантажується, перед відправкою його на сервер, наступний код показує, як це зробити