Сьогоднішній урок присвячений створенню форми завантаження файлів на сайт за допомогою jQuery.
Часом форми для завантаження безлічі файлів просто необхідні для Ваших додатків, але зробити їх не таке вже й просте завдання.
Завдяки jQuery даний процес істотно полегшується.
В даному уроці буде використовуватися остання версія фреймворку jQuery і плагіна Ajax upload () від Андрія Валумса. Обидві вони знаходяться в исходниках до даного уроку.
Демо не викладаю, щоб не завантажувати наш сервер різними картинками від користувачів. Можете спробувати у себе - все прекрасно працює.
Перш за все, давайте створимо кнопку завантаження, при натисканні на яку буде відкриватися діалогове вікно вибору файлу
Ви можете використовувати будь-який елемент для кнопки. В наведеному вище прикладі я використовував div. Були застосовані наступні стилі:
Також поруч з кнопкою необхідно додати span елемент для показу різних повідомлень під час завантаження. Для показу завантажених файлів користувачеві, також був доданий невпорядкований список після кнопки. Ось повний код:
Нижче представлений простий PHP код, який видає повідомлення "Успіх" при правильній завантаженні, і "Помилка"
Пояснення коду: для використання бібліотеки AJAX Upload нам необхідно її форматувати і дати їй параметри. Перший параметр це id кнопки, на яку буде натискати користувач. Другий параметр це скрипт, який буде справлятися із завантаженням. Другий параметр може прийняти масив різних опцій для додання більшого контролю над процесом.
Так було і зроблено.
- action - шлях до скриптів на стороні сервера
- name - ім'я комірки введення файлу, яке буде використовуватися для завантаження
- onSubmit - дозволяє виконати функції перед завантаженням. Наприклад, можна перевірити розширення файлів, як і було зроблено.
- onComplete - дозволяє виконувати дії після завантаження. Наприклад, показ завантаженої картинки користувачеві.
Дякую за увагу!
Сьогодні ми хотіли б поділитися кількома ідеями стосується ефекту блочного розкриття, яку ви можете використовувати для своїх проектів.
Якщо ви хочете істотно підвищити рівень безпеки вашого сайту на WordPress, то вам не уникнути конфігурації файлу .htaccess. Це дозволить не тільки уберегтися від цілого ряду хакерських атак, а й організувати перенаправлення, а також вирішити завдання пов'язані з кешем.
Material Design - це набирає обертів тренд від Google. У даній збірці зібрані безкоштовні теми для WordPress, виконані в цьому популярному стилі.
Ефекти на те й існують щоб вражати наших відвідувачів. У цій збірці зібрано кілька десятків ресурсів, чиї творці дуже постаралися вразити своїх відвідувачів.
Під кінець місяця пропонуємо ознайомитися з набором безкоштовних матеріалів для веб дизайнерів за минулий місяць.
круто, санки вері матч!
>> Демо не викладаю, щоб не завантажувати наш сервер різними картинками від користувачів. Можете спробувати у себе - все прекрасно працює. Могли б і урок не викладати. Чого сервер уроками забивати. І взагалі нехай все гуглять. Код знайдений через гугл прекрасно працює. Зазвичай такі системи завантажених файлів дуже проблематичні. Після завантаження на сервер завжди вимагають довгої настройки, потім Долгово пошуку помилок, потім підпилювання напилком, створення директорій з особливим доступом, вказівка шляху збереження файлів. Робити все це щоб просто подивитися як працює код - не дуже хочеться.
stark44
все працює без настройки, називається "Чи не пробував, але не схвалюю"
Мда варто закоментіть onSubmit: і вантажу все що хочу!)))
Дуже потрібний скрипт. Велике спасибі!
Чи не працює з новим jQuery 1.6. Як полікувати.
Хлопці, підкажіть будь ласка як зробити вибір відразу декількох файлів. Заздалегідь дякую!
Добрі люди, підкажіть будь ласка як зробити, що б файли завантажувалися з рандомних іменами?
$ Filename - стара назва фалйа
А як замість тексту: зробити відображення картинки "анімації завантаження"?
Ігор Хроменков
Замініть на status.html (
А як додати в JS код видалення картинки, при кліці на який-небудь значок, після її відображення в onComplete?
підкажіть як можна виводити текст помилки? тобто щоб показував не ім'я файлу який не вийшло завантажити, а повідомлення яке описує в чому полягає помилка
mishakokhanych
Допоможіть! як можна збільшити розмір файлу. Мені потрібно, щоб завантажували до 50 МБ, не до 13680 байт Заранее спасибо.
Ігор Хроменков
В скрипті обмежень на максимальний розмір файлу немає, спробуйте прописати слід. в файлі .htaccess
А як передати два додаткових текстових параметра
i_am_dictator
Допоможіть. Наприклад коли додаєш статтю, до неї треба прикріпити word файл, я хотів воспользаваться цією кнопкою і щоб коли вона завантажить файл вона виклала посилання на цей файл. Якось так
do0zy
abayevdv
Дякуємо. Облазив купа сайтів, ну такі без руки - лаятися грішно. А тут прям розжували і в рот. Спасибі в загальному))))
Скрипт конешноже чудовий, все вантажить чудово, однак без збереження даних в БД він марний.
Величезне спасибі за такий прекрасний скрипт, з БД розібрався запис відбувається. Може бути хтось підкаже де можна подивитися галерею фото як зроблено вконтакте?
igormrdoss
Все зробив правильно, але спрацьовує через раз. Після поновлення сторінки.
zahermaher
не працює. Всім фото присвоюється class = "error" і вони не завантажуватися взагалі. Що в Мозілли, що в хромі. Це я про вихідні говорю.
zahermaher
а все розібрався. шлях треба було дописати до upload-file.php а ще у вас в исходниках, два тега span не закриті в index.html:
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!