AJAX завантаження файлів на сервер за допомогою jQuery

У цій нотатці ви дізнаєтесь, як реалізувати AJAX завантаження файлів на сервер за допомогою jQuery. Це не так уже й складно!

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

Дивіться також:

• Порядок завантаження файлів WordPress теми
• Як додати додаткові поля до медіа-завантажувача WordPress
• WordPress плагін для завантаження файлів на вашу скриньку Dropbox
• Uploadcare — заощаджуємо час під час завантаження файлів на WordPress
• Відображаємо помилку, якщо файл перевищує допустимий розмір під час завантаження на WordPress

Зауважу наперед, що ця стаття навряд чи допоможе, якщо ви зовсім погано знаєтеся на jQuery і PHP, базові знання обов'язкові. І, мабуть, обов'язково мати хоч якийсь досвід у завантаженні файлів (картинок) на сервер із звичайною HTML формою, принаймні потрібно уявляти як це працює.

Ну, менше слів, почнемо!

Для початку припустимо, що у нас є такий HTML код: поле та кнопка завантаження:

<input type="file" multiple="multiple" accept=".txt,image/*">
<a href="#" class="submit button">Загрузить файлы</a>
<div class="ajax-respond"></div>

1. Отримання даних файлу з поля файлу

Перше, що нам потрібно зробити — це отримати дані вхід поля при додаванні файлу(ів). Для цього прикріпимо до події зміна свою функцію, яка встановить дані файлу:

// Переменная куда будут располагаться данные файлов

var files;

// Вешаем функцию на событие
// Получим данные файлов и добавим их в переменную

$('input[type=file]').change(function(){
	files = this.files;
});

Цей код збереже дані поля type="file" в змінну файли, з якою ми будемо працювати далі.

2. Завантажуємо файли на кліку

Тепер нам потрібно повісити подію кліка на кнопку "Завантажити файлиТут і буде посилатися AJAX запит з даними файлів.

Створимо функцію, повісимо її на подію клацання і відправимо AJAX запит із даними файлів. Цей запит відрізняється від звичайного запиту AJAX, і тут не підходить звичайна відправка POST даних:

// Вешаем функцию ан событие click и отправляем AJAX запрос с данными файлов

$('.submit.button').click(function( event ){
	event.stopPropagation(); // Остановка происходящего
	event.preventDefault();  // Полная остановка происходящего

	// Создадим данные формы и добавим в них данные файлов из files

	var data = new FormData();
	$.each( files, function( key, value ){
		data.append( key, value );
	});

	// Отправляем запрос

	$.ajax({
		url: './submit.php?uploadfiles',
		type: 'POST',
		data: data,
		cache: false,
		dataType: 'json',
		processData: false, // Не обрабатываем файлы (Don't process the files)
		contentType: false, // Так jQuery скажет серверу что это строковой запрос
		success: function( respond, textStatus, jqXHR ){

			// Если все ОК

			if( typeof respond.error === 'undefined' ){
				// Файлы успешно загружены, делаем что нибудь здесь

				// выведем пути к загруженным файлам в блок '.ajax-respond'

				var files_path = respond.files;
				var html = '';
				$.each( files_path, function( key, val ){ html += val +'<br>'; } )
				$('.ajax-respond').html( html );
			}
			else{
				console.log('ОШИБКИ ОТВЕТА сервера: ' + respond.error );
			}
		},
		error: function( jqXHR, textStatus, errorThrown ){
			console.log('ОШИБКИ AJAX запроса: ' + textStatus );
		}
	});

});

Що виконує функція? Створює новий об'єкт new formData(), додає до нього дані файлів з масиву файли. Потім цей об'єкт даних форми передається в запит AJAX. 2 параметри потрібно встановити в false обов'язково:

• processData - тому що jQuery конвертуватиме масив файли в рядок і сервер не зможе отримати дані.
• contentType - тому що дефолтні установки jQuery рівні application / x-www-form-urlencoded, що не передбачає надсилання файлів. А ще, якщо встановити цей параметр у багаточастинні / форми-дані, схоже, це нічого не дасть.

3. Завантаження файлів на сервер

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

Створимо файл submit.php і додамо в нього цей код (передбачається, що submit.php лежить у тій же папці, де і файл, з якого відправляється AJAX запит):

<?php

// Здесь нужно сделать все проверки передаваемых файлов и вывести ошибки если нужно

// Переменная ответа

$data = array();

if( isset( $_GET['uploadfiles'] ) ){
	$error = false;
	$files = array();

	$uploaddir = './uploads/'; // . - текущая папка где находится submit.php

	// Создадим папку если её нет

	if( ! is_dir( $uploaddir ) ) mkdir( $uploaddir, 0777 );

	// переместим файлы из временной директории в указанную
	foreach( $_FILES as $file ){
		if( move_uploaded_file( $file['tmp_name'], $uploaddir . basename($file['name']) ) ){
			$files[] = realpath( $uploaddir . $file['name'] );
		}
		else{
			$error = true;
		}
	}

	$data = $error ? array('error' => 'Ошибка загрузки файлов.') : array('files' => $files );

	echo json_encode( $data );
}

Не використовуйте цей код! Пишіть свій!

Ось і все.

Висновок

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

Щоб не збирати весь вищеописаний код вручну, скачайте цей архів: ajax-file-upload.zip. Завантажте його вміст на ваш php сервер, зайдіть в пакет з архіву, і спробуйте завантажити файл. Ви побачите, як все це працює, зможете "пошаманити" над кодом і розібратися докладніше в реальних умовах.

Також, рекомендую до прочитання статтю про базові знання для створення AJAX запитів у WordPress:

Ajax у WordPress

Знання з цієї статті вам знадобляться при створенні AJAX завантаження файлів під WordPress.

Автор: Тимур Камаєв

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/