вступ
Сучасні тенденції і підходи в веб-розробці
Дізнайтеся алгоритм швидкого професійного зростання з нуля в сайтобудування
Крок 1: розмітка HTML
Почніть з створення документа html і визначення форми, яка буде використовуватися для завантажувача файлів. Збережіть його як index.html.
Починаємо свій документ html з додавання звичайних doctype, html, тегів head і body. В head додаємо заголовок, посилання на таблицю стилів, посилання на Google jQuery CDN і свій плагін Ajax. Другий тег script знаходиться там, куди ми будемо розміщувати весь код після того, як документ буде готовий.
Зовсім файли
Нам також знадобиться плагін Ajax upload. Збережіть його як ajaxupload.js і вивантажити на сервер в папку з назвою "ajax".
Крок 2: стилі CSS
Для функціональності цієї простої форми потрібно всього три рядки стилів, приховування div'а loading на сторінці завантаження, і розцвічування тексту повідомлень про успішне виконання і помилку. Звичайно, ви можете все поліпшити і зробити гарніше, ніж в моєму простому прикладі завантажувача. Збережіть як style.css.
Тепер можна взятися за створення функцій jQuery, які змушують наш завантажувач працювати. Нам буде простіше розмітити, як все працює в цілому, розділивши секції на дії.
Ми починаємо призначення змінних свого завантажувача Ajax, по-перше, з установки введення #userfile як змінної завантаження, а потім призначаємо дію, з якого починає діяти введення, коли вибирається файл.
Вищенаведений фрагмент говорить завантажувачу що робити, як тільки файл вибраний з нашого файлового введення. По-перше, показується анімація завантаження, поки перевіряється розширення файлу. Якщо розширення файлу не збігається з зумовленими, вивантаження зупиняється і користувачеві показується повідомлення про помилку. Як тільки користувач робить нову спробу з правильним розширенням файлу, повідомлення про помилку забирається, і дані файлу віддаються в файл upload.php за допомогою команди setData.
Як тільки наш файл передається в upload.php, до якого ми скоро доберемося, зображення завантаження ховається і, за допомогою захоплення статусу з iframe, створюваного плагіном ajaxupload, показується повідомлення про успішне виконання або помилку.
скрипт цілком
Скопіюйте та вставте весь цей код в розділ head свого документа.
Крок 4: PHP
Файл php робить дійсну вивантаження на наш сервер в той час, як функції, які ми наведемо у виконання, забезпечують валідацію, щоб переконатися, що вивантажений файл залишається в межах встановлених нами правил. Пояснити все простіше допоможе розбиття цього файлу на секції.
Хоча багато тут і так зрозуміло, я поясню, що виконує всі вищенаведене.
Сучасні тенденції і підходи в веб-розробці
Дізнайтеся алгоритм швидкого професійного зростання з нуля в сайтобудування
Змінна $ max_filesize визначає максимальний розмір дозволеного для вивантаження файлу, в даний момент вона встановлена на 2mb (так за замовчуванням виставляють свої сервери більшість хостинг-провайдерів), певні в байтах.
Змінна $ filename отримує з введення #userfile назва файлу цілком, включаючи розширення.
Змінна $ ext перевіряє правильність розширення на відповідність масиву $ allowed_filetypes.
Змінна $ allowed_filetypes вибудовує і має в своєму розпорядженні в певному порядку види файлів для посилання, коли запускається перевірка в нижній частині коду, до якого ми незабаром доберемося.
Нарешті, $ upload_path визначає папку, в яку будуть переміщатися вивантаження, відповідну домашньої на вашому сервері. Іншими словами, більшість серверів конфигурируются файлової структурою на кшталт цієї: /home/yourusername/yoursite.com/path/to/uploads/. Переконайтеся, що використовуєте повний шлях з початковими і кінцевими мітками "/".
Знаходимо кореневої каталог сервера
Щоб легко знайти шлях, який потрібно тут ввести, спробуйте вивантажити на сервер нижченаведений скрипт php, назвати його root.php і отримати до нього доступ зі свого браузера. Переконайтеся, що після того, як знайшли кореневої каталог свого сервера, ви видалили файл, щоб не виставляти його напоказ.
Інша частина скрипта просто обробляє функції, засновані на встановлених нами в наведеному вище коді параметрах.
Спочатку перевіряється масив видів файлів, і якщо цього розширення в ньому немає, скрипт зупиняє виконання (die) і виводить повідомлення про помилку.
Перевірте розмір файлу на відповідність встановленої змінної, якщо він більше, скрипт зупиняє виконання (die) і виводить повідомлення про помилку.
Ця частина коду перевіряє папку на сервері, щоб переконатися, що вона жорсткий, або придатна для розміщення в ній файлу нашим скриптом. Якщо немає, знову застосовуємо (die) і виводимо повідомлення користувачу.
Якщо файл пройшов всі перевірки на стороні сервера, то він переміщається в папку завантажень. Якщо щось ще пішло не так, наш користувач сповіщається про те, що слід вдатися до нової спроби.
upload.php
Скопіюйте та вставте весь цей код в новий файл і збережіть його як upload.php
Встановлюємо права доступу до файлів
Перед тим, як протестувати свій завантажувач, потрібно переконатися, що папка, куди підуть наші вивантаження, жорсткий. Я обійдуся без звичайних речей типу CHMOD на 777 і піду далі. Якщо ви знайомі з використанням клієнта Telnet, ця частина - не для вас, вона для тих, хто був зовсім як я, коли починав, спраглим прочитати і вивчити CHMOD і тут же подумав «Що за фігня?»
По суті, відкрийте свій ftp-клієнт і пройдіть в папку, куди переміщуються завантаження з цього завантажувача. Клацніть правою кнопкою миші по папці і виберіть властивості (properties), переконайтеся, що всі вікна встановлені на read, write і execute, (777) натисніть OK і закрийте вікно.
Пройдіть в Dreamweaver до папки з вивантаження під час дистанційного керування і клацніть правою кнопкою миші по файлу, виберіть «Встановити права доступу» (Set permissions) і далі дотримуйтесь вищенаведеним інструкціям.
Крок 5: спробуйте
Останній крок - спробувати і подивитися, чи працює він чи ні. Якщо нічого не відбувається або щось ламається, поверніться назад, пройдіть по ретельно розписаним мною кроків і визначте, що не так. Не бійтеся завантажити вихідні файли і перевірити демо-версію, щоб краще зрозуміти, як працює завантажувач.
Спасибі за прочитання!
Редакція: Ріг Віктор і Андрій Бернацький. Команда webformyself.
Сучасні тенденції і підходи в веб-розробці
Дізнайтеся алгоритм швидкого професійного зростання з нуля в сайтобудування
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі
Створення залежних списків засобами AJAX
Прямо зараз подивіться курс по створенню залежних списків засобами AJAX!