Як створити завантажувач файлів в стилі Ajax

13

Від автора: у цьому підручнику за допомогою jQuery, Ajax, Php ми створимо простий завантажувач файлів в стилі Ajax. Той, який ви легко зможете здійснити на своєму сайті, доповнений серверної валідацією та валідацією на стороні клієнта.

Вступ

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

Як створити завантажувач файлів в стилі Ajax

Як створити завантажувач файлів в стилі Ajax

Як створити завантажувач файлів в стилі Ajax

Крок 1: розмітка HTML

Почніть із створення документа html і визначення форми, яка буде використовуватися для завантажувача файлів. Збережіть його як index.html.

Ajax Uploader
$(document).ready(function() {
// виконувати, коли готовий DOM
});

Choose file(s) to upload:

Як створити завантажувач файлів в стилі Ajax Loading, please wait…

Починаємо свій документ html з додавання звичайних doctype, html тегів head і body. В head додаємо заголовок, посилання на таблицю стилів, посилання на Google jQuery CDN і свій плагін Ajax. Другий тег script знаходиться там, куди ми будемо розміщувати увесь код після того, як документ буде готовий.

Всередині body робимо розмітку сторінки за допомогою div а #file_holder, який стане нашим пакувальником, формою і нескриптовой кнопкою submit (відправити), яка допоможе зберегти юзабіліті (простоту та доступність використання), якщо у користувача в браузері не включений javascript, введення завантажувача файлів і два div а, які будуть містити зображення завантаження, а також повідомлення про помилки.

Як створити завантажувач файлів в стилі Ajax

Якщо у нашого користувача не активований javascript, операція form подбає про передачу файлу до upload.php, користувач буде просто переадресовано до неї замість того, щоб залишатися на тій же сторінці, і з’явиться повідомлення про успішне виконання або помилку.

Залежні файли

Для завантаження зображення я застосував «покажчики-стрілки» (arrows) http://www.ajaxload.info/.
Виберіть зображення, яке вам подобається, збережіть його як content-1/images/ajax-loader.gif і вивантажите на свій сервер.

Нам також знадобиться плагін Ajax upload. Збережіть його як ajaxupload.js і вивантажите на сервер в папку з назвою «ajax».

Крок 2: стилі CSS

Для функціональності цієї простої форми потрібно всього три рядки стилів, приховування div а loading на сторінці завантаження, і расцвечивание тексту повідомлень про успішне виконання і помилку. Звичайно, ви можете все і поліпшити зробити гарніше, ніж в моєму простому прикладі завантажувача. Збережіть style.css.

/*Документ CSS*/
#loading {display:none;}
.error {color:#900000;}
.success {color:#009900;}

Крок 3: Javascript

Тепер можна взятися за створення функцій jQuery, які змушують наш завантажувач працювати. Нам буде простіше розмітити, як все працює в цілому, розділивши секції на дії.

var upload = new AjaxUpload(‘#userfile’, {
//вивантажуємо скрипт
action: ‘upload.php’,

Ми починаємо призначення змінних свого завантажувача Ajax, по-перше, з установки введення #userfile як змінної завантаження, а потім призначаємо дію, з якого починає діяти введення, коли вибирається файл.

onSubmit : function(file, extension){
//показуємо анімацію завантаження
$(«#loading»).show();
//перевіряємо розширення файлу
if (! (extension && /^(jpg|png|jpeg|gif)$/.test(extension))){
// якщо розширення не дозволено
$(«#loading»).hide();
$(«Помилка: Невеный формат файлу«).appendTo(«#file_holder
#errormes»);
// скасовуємо вивантаження
return false;
} else {
// прибираємо повідомлення про помилку
$(‘.error’).hide();
}
//посилаємо дані
upload.setData({‘file’: file});
},

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

onComplete : function(file, response){
//приховуємо анімацію завантаження
$(«#loading»).hide();
//додаємо display:block у тримач повідомлення про виконання
$(«.success»).css(«display», «block»);
//знаходимо div у iFrame і прикріплюємо до повідомлення про помилку
var oBody = $(«.iframe»).contents().find(«div»);
//додаємо iFrame до errormes
$(oBody).appendTo(«#file_holder #errormes»);
}

Як тільки наш файл передається в upload.php, до якого ми скоро доберемося, зображення завантаження ховається і, за допомогою захоплення статусу iframe, створюваного плагіном ajaxupload, показується повідомлення про успішне виконання або помилку.

Скрипт повністю

Скопіюйте та вставте весь цей код в розділ head свого документа.

$(document).ready(function() {
var upload = new AjaxUpload(‘#userfile’, {
//вивантажуємо скрипт
//action: ‘upload.php’, //вивантажує відключене в цілях безпеки
action: ‘upload.htm’,
onSubmit : function(file, extension){
//показуємо анімацію завантаження
$(«#loading»).show();
//перевіряємо розширення файлу
if (! (extension && /^(jpg|png|jpeg|gif)$/.test(extension))){
// розширення не дозволено
$(«#loading»).hide();
$(«Error: Not a valid file extension«).appendTo(«#file_holder #errormes»);
// скасовуємо вивантаження
return false;
} else {
// позбавляємося від повідомлення про помилку
$(‘.error’).hide();
}
//висилаємо дані
upload.setData({‘file’: file});
},
onComplete : function(file, response){
//приховуємо анімацію завантаження
$(«#loading»).hide();
//додаємо display:block у тримач повідомлення про виконання
$(«.success»).css(«display», «block»);
//знаходимо div у iFrame і прикріплюємо до повідомлення про помилку
var oBody = $(«.iframe»).contents().find(«div»);
//додаємо iFrame до errormes td
$(oBody).appendTo(«#file_holder #errormes»);
}
});
});

Крок 4: PHP

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

$max_filesize = 2097152; // максимальний розмір файлу в БАЙТАХ.
$allowed_filetypes = array(‘.jpg’,’.jpeg’,’.gif’,’.png’); // Це будуть види файлів, які пройдуть перевірку (валідацію).
$filename = $_FILES[‘userfile’][‘name’]; // отримуємо назва файлу (включаючи його розширення).
$ext = substr($filename, strpos($filename,’.’), strlen($filename)-1); // Отримуємо розширення назви файла.
$file_strip = str_replace(» «,»_»,$filename); //Заміщаємо прогалини в назві файлу
$upload_path = ‘/path/to/uploads/’; //встановлюємо шлях вивантаження

Хоча багато що тут і так зрозуміло, я поясню, що виконує все вищенаведене.

Змінна $max_filesize визначає максимальний розмір дозволеного для вивантаження файлу, в даний момент вона встановлена на 2mb (так за замовчуванням виставляють свої сервери більшість хостинг-провайдерів), визначені в байтах.

Змінна $filename отримує з введення #userfile назва файлу цілком, включаючи розширення.
Змінна $ext перевіряє правильність розширення на відповідність масиву $allowed_filetypes.

Змінна $allowed_filetypes вибудовує і має в певному порядку види файлів для посилання, коли запускається перевірка в нижній частині коду, до якого ми незабаром доберемося.

$file_strip заміщує будь-які прогалини в назві файлу підкресленнями, навіщо? Якщо ім’я файлу використовується в url, такому як посилання на зображення і т. д., прогалини часто заміщуються на 20% створенням адреси sloppy і його складно індексувати пошуковикам.

Нарешті, $upload_path визначає теку, в яку буде переміщатися вивантаження, відповідну домашньою на вашому сервері. Іншими словами, більшість серверів конфігуруються файловою структурою зразок цієї:/home/yourusername/yoursite.com/path/to/uploads/. Переконайтеся, що використовуєте повний шлях з початковими і кінцевими позначками «/».

Знаходимо кореневий каталог сервера

Щоб легко знайти шлях, який потрібно ввести тут, спробуйте завантажити на сервер нижченаведений скрипт php, назвати його root.php і отримати до нього доступ з свого браузера. Переконайтеся, що після того, як знайшли кореневий каталог свого сервера, ви видалили файл, щоб не виставляти його напоказ.

Інша частина скрипта просто обробляє функції, засновані на встановлених нами у наведеному вище коді параметрах.

// Перевіряємо, чи дозволений тип файлу, якщо не DIE, та інформуємо користувача.
if(!in_array($ext,$allowed_filetypes)) {
die(‘

Тип завантаження файлу недостим.

‘);
}

Спочатку перевіряється масив видів файлів, і якщо цього розширення в ньому немає, скрипт зупиняє виконання (die) і виводить повідомлення про помилку.

// Тепер перевіряємо розмір файлу, якщо він занадто великий, то DIE та інформуємо користувача.
if(filesize($_FILES[‘userfile’][‘tmp_name’]) > $max_filesize) {
die(‘

Загружаемы файл занадто великий.

‘);
}

Перевірте розмір файлу на відповідність встановленої змінної, якщо він більше, скрипт зупиняє виконання (die) і виводить повідомлення про помилку.

// Перевіряємо, чи можна вивантажити в певний шлях, якщо ні, то DIE та інформуємо користувача.
if(!is_writable($upload_path)) {
die(‘

Ви не можете завантажувати в папку /uploads/. Змініть права на папку.

‘);

Ця частина коду перевіряє папку на сервері, щоб переконатися, що вона жорсткий, чи придатна для розміщення в ній файлу нашим скриптом. Якщо ні, знову застосовуємо (die) і виводимо повідомлення користувачеві.

// Переміщаємо файл, якщо все пройшло перевірку.
if(move_uploaded_file($_FILES[‘userfile’][‘tmp_name’],$upload_path . $file_strip)) {
echo ‘

‘. $file_strip .’ Файл успішно завантажений.

‘; // Вийшло.
} else {
echo ‘

‘. $file_strip .’ Файл завантажений. Спробуйте пізніше.

>’; // Не вийшло Як створити завантажувач файлів в стилі Ajax .
}

Якщо файл пройшов всі перевірки на стороні сервера, то він переміщається в папку завантажень. Якщо щось пішло не так, наш користувач інформується про те, що слід зробити нову спробу.

upload.php

Скопіюйте та вставте весь цей код у новий файл і збережіть його як upload.php

Тип завантаження файлу недостим.

‘);
}
// Тепер перевіряємо розмір файлу, якщо він занадто великий, то DIE та інформуємо користувача.
if(filesize($_FILES[‘userfile’][‘tmp_name’]) > $max_filesize) {
die(‘

Загружаемы файл занадто великий.

‘);
}
// Перевіряємо, чи можна вивантажити в певний шлях, якщо ні, то DIE та інформуємо користувача.
if(!is_writable($upload_path)) {
die(‘

Ви не можете завантажувати в папку /uploads/. Змініть права на папку.

‘);
}
// Переміщаємо файл, якщо він пройшов всі перевірки.
if(move_uploaded_file($_FILES[‘userfile’][‘tmp_name’],$upload_path . $file_strip)) {
echo ‘

‘. $file_strip .’ Файл успішно завантажений.

>’; // Вийшло.
} else {
echo ‘

‘. $file_strip . Файл завантажений. Спробуйте пізніше.

‘; // Не вийшло Як створити завантажувач файлів в стилі Ajax .
}
?>

Встановлюємо права доступу до файлів

Перед тим, як протестувати свій завантажувач, потрібно переконатися, що папка, куди підуть наші вивантаження, жорсткий. Я обійдуся без звичайних речей типу CHMOD на 777 і піду далі. Якщо ви знайомі з використанням клієнта Telnet, ця частина – не для вас, вона для тих, хто був зовсім як я, коли починав, спраглим прочитати і вивчити CHMOD і тут же подумавшим «Що за фігня?»

В сутності, відкрийте свій ftp-клієнт і перейдіть в папку, куди переміщуються завантаження з цього завантажувача. Клацніть правою кнопкою миші на папці і виберіть властивості (properties), переконайтеся, що всі вікна встановлені на read, write і execute, (777) натисніть OK і закрийте вікно.

Пройдіть в Dreamweaver до папки з выгрузками під час дистанційного управління і клацніть правою кнопкою миші по файлу, виберіть «Встановити права доступу» (Set permissions) і далі дотримуйтесь інструкцій.

Як створити завантажувач файлів в стилі Ajax

Крок 5: спробуйте

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

Спасибі за прочитання!