У цій замітці ви дізнаєтеся, як реалізувати AJAX завантаження файлів на сервер з використанням jQuery. Це не так вже й складно!
Не знаю точно, але щось мені підказує, що до появи jQuery завантаження файлів на сервер по AJAX технології була чимось дуже незрозумілим, а значить вкрай складним. Але сьогодні з появою jQuery навіть не володіє досвідом веб-майстер може зробити це без особливих зусиль. Однак, так чи інакше, розібратися все ж доведеться. І зараз я спробую дуже коротко і зрозуміло пояснити вам, як це робиться, а щоб простіше було сприймати, урок містить тільки потрібне і розбитий на кроки.
Ну, менше слів, приступимо!
Для початку припустимо, що у нас є такий HTML код: поле і кнопка завантаження:
1. Отримання даних файлу з поля file
Перше що нам потрібно зробити - це отримати дані input поля при додаванні в нього файлу (ів). Для цього прикріпимо до події change свою функцію, яка встановить дані файлу:
Цей код збереже дані поля type = "file" в змінну files. з якої ми будемо працювати далі.
2. Завантажуємо файли при натисканні
Тепер, нам потрібно повісити подія кліка на кнопку "Завантажити файли". Тут і буде надсилатися AJAX запит з даними файлів.
Створимо функцію, повісимо її на подію click і відправимо AJAX запит з даними файлів. Цей запит відрізняється від звичайного AJAX запиту, і тут не підходить звичайна відправка POST даних:
Що робить функція? Створює новий об'єкт new formData (). додає в нього дані файлів з масиву files. Потім цей об'єкт даних форми передається в AJAX запит. 2 параметра потрібно встановити в false обов'язково:
- processData - бо jQuery буде конвертувати масив files в рядок, і сервер не зможе отримати дані.
- contentType - тому що дефолтні установки jQuery рівні application / x-www-form-urlencoded. що не передбачає відправку файлів. А ще, якщо встановити цей параметр в multipart / form-data. схоже це нічого не дасть.
3. Завантаження файлів на сервер
Щоб наочно показати, як обробляти відправлений у другому пункті запит, наведу простий php-скрипт, без всяких перевірок.
Створимо файл submit.php і додамо в нього цей код (передбачається що submit.php лежить в тій же папці, де і файл, з якого відправляється AJAX запит):
Не використовуйте цей код безпосередньо! Пишіть свій!
висновок
Щоб не збирати весь вищеописаний код вручну, скачайте ось цей архів: ajax-file-upload.zip. Завантажте його вміст на ваш php сервер, зайдіть в паку з архіву, і спробуйте завантажити файл. Ви побачите, як все це працює, зможете "пошаманити" над кодом і розібратися докладніше в реальних умовах.
Також, рекомендую до прочитання статтю про базові знання для створення AJAX запитів в WordPress:
Знання з цієї статті вам дуже знадобляться при створенні AJAX завантаження файлів під WordPress.
Загалом вийшло так, що змінив dataType: на HTML, вніс невеликі правки і запрацювало!
Дякую за код, не перший раз його використовую. Але в останній раз чомусь data.append (key, value); ніяк працювати не хоче. var data = new FormData ();
$ .each (files, function (key, value) console.log (key + ';' + value);
data.append (key, value);
>);
console.log (data);
В консоль виводить всі файли - console.log (key + ';' + value); але ось data - порожній. помилки js не видає.
Шановні!
Оберніть код в форму, замість click (function використовуйте submit (function тобто подія на форму, а не на кнопку. Далі var form_data = new FormData ($ (this) .get (0)); і передавайте в form_data всі параметри форми, в тому числі і прикріплений файл.
$ ( '# Form'). Submit (function () var form_data = new FormData ($ (this) .get (0));
$ .ajax (url: './submit.php?uploadfiles',
type: 'POST',
data: form_data,
cache: false,
dataType: 'json',
processData: false, // Чи не обробляємо файли (Do not process the files)
contentType: false,
success: function ()<>
>
на виході отримаєте і POST і FILE
П.С. не знайшов контактів, тому пиши суду.
Якщо "відправляти" без файлів - помилка :) Лікується ось такий рядком
event.preventDefault (); // Повна зупинка відбувається
if (typeof files == 'undefined') return;
Дякую за приклад.
замість:
$ .each (files_path, function (key, val) )
написати:
$ .each (files_path, function (key, val) )
само собою підправити трохи css
наприклад так
.admin .ajaxRespond display: -webkit-flex;
display: flex;
>
.admin .ajaxRespond-imgPreview width: 200px;
>
А так звичайно все супер, я ще накинув створення превью і ресайз коротше, зіштовхнув справу з мертвої точки. Все хотів так ніяк. )
Можна було прибрати замість двох рядків, тільки верхню, друга зупиняє стандартну обробку форми
Підкажіть як вже завантажені файли відправляти на пошту?
Дякуємо! Все працює, у кого не виходить просто упускають щось, в моєму випадку мені був потрібен тільки один файл і я додав його так:
var data = new FormData ();
data.append ( "name", $ ( "input [type = file]") [0] .files [0]);
і що б не було помилок обов'язково використовувати:
processData: false,
contentType: false,
Смішно, ajax відправляє дані POST запитом, а на сервері чомусь GET
url: './submit.php?uploadfiles',
type: 'POST',
data: data,
Тут data передається методом POST і буде доступна через змінну $ _POST, але так як це файли, то $ FILES, а uploadfiles вказано GET параметром. Разом запит йде на ./submit.php зі змінною $ _GET [ 'uploadfiles'] і змінними в $ _POST / $ _FILES передані методом $ _POST. Ніхто ж не забороняє одночасно передавати GET і POST дані.
Код з прикладу не працює.
Майже все відмінно працює. Два питання. 1. В директорію на сервері імена файлів переносяться нормально тільки якщо вони в латиниці. В кирилиці пишеться абракадабра. Причому користувачеві повертаються імена нормально. Як від цього позбутися? 2. Завантажується тільки один останній обраний файл. Як завантажити кілька?
Маючи мозок, я їм подумав), перед тим як витрачати час. А код, бува, не для html5? Якщо так, то весь сенс втрачається. Атрибути дивні в html. Без них працювати буде?