Динамічне завантаження файлів на jquery

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

Безумовно, без стороннього плагіна буде вкрай важко обійтися. З усіх варіантів мені найбільше сподобався Uploadify. Завантажити його можна тут: https://uploadify.com/download/.

Відео: Завантаження картинки на сервер за допомогою AJAX

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

 
 
 
Завантаження файлів 
http-equiv="Content-Type"content="Text / html- charset = utf-8"gt; 
href="Css / uploadify.css"rel="Stylesheet"type="Text / css"/ Gt;

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

Відео: Блискавична AJAX завантаження сторінок сайту з jQuery PJAX

Так само підключається jQuery і сам плагін. Далі створюється форма, а у input з type = "file" ставиться id, який потім вже буде використовуватися в скрипті.

У самому скрипті передаються дані в formData. А саме поточний час і секретний токен. замість "unique_salt"Може бути будь-яка секретна рядок. У властивості"uploader"Передається скрипт-обробник. Тепер сам код цього обробника:

Відео: jаvascript - Завантаження файлів на сервер за допомогою AJAX

lt ;?php 
 $ targetFolder =`/ Uploads`-// Куди завантажувати файли 
 $ verifyToken = md5(`Unique_salt`. $ _POST[`Timestamp`]) -// Створюємо токен аналогічний тому, що отриманий з jаvascript 
if(!empty($ _FILES) $ _POST[`Token`]== $ verifyToken){// Якщо токени збігаються, значить, можна завантажувати файли 
/ * Створюємо повний шлях до завантажуваного файлу * / 
$ tempFile = $ _FILES[`Filedata`] [`Tmp_name`] - 
$ targetPath = $ _SERVER[`DOCUMENT_ROOT`]. $ targetFolder- 
$ targetFile = rtrim($ targetPath,`/`).`/`. $ _FILES[`Filedata`] [`Name`] - 
$ fileTypes = array(`Jpg`,`Jpeg`,`Gif`,`Png`) -// Дозволені розширення 
$ fileParts = pathinfo($ _FILES[`Filedata`] [`Name`]) -// Отримуємо розширення у файлу, що 
if(in_array($ fileParts[`Extension`],$ fileTypes)){ 
 move_uploaded_file($ tempFile,$ targetFile) -// Якщо розширення завантаження дозволено, то завантажуємо файл 
 echo `1`- 
}else echo `Invalid file type.`-// Виводимо помилку 
} 
?gt;

Код я прокоментував, тому, думаю, що в ньому розібратися не складе труднощів. Єдине, що зазначу - перевірок тут недостатньо. Втім, про безпечну завантаження зображень я писав в окремій статті.

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

Поділися в соціальних мережах:

Схожі