Загрузка файлов через AJAX с помощью jQuery Form Plugin

Пример загрузки изображений через AJAX с помощью плагина jQuery Form Plugin.

Как работает:

  1. На поле выбора файла с id="js-file" повешено jquery событие change.
  2. При выборе файла срабатывает событие и выполняется метод плагина ajaxSubmit, он все поля из формы с id="js-form" включая выбранный файл отправляет на uploads.php.
  3. Далее то что отдаст uploads.php выведется в <div id="result">...</div>.
  4. После завершения, форма очищается методом reset() т.к. input file останется с выбранным файлом.
1
<form id="js-form" method="post">
	<input id="js-file" type="file" name="file">
</form>
 
<div id="result">
	<!-- Сюда выводится результат из upload_ajax.php -->
</div>
 
<script src="/jquery.min.js"></script>
<script src="/jquery.form.min.js"></script>

<script>
$('#js-file').change(function() {
	$('#js-form').ajaxSubmit({
		type: 'POST',
		url: '/upload_ajax.php',
		target: '#result',
		success: function() {
			// После загрузки файла очистим форму.
			$('#js-form')[0].reset();
		}
	});
});
</script>
HTML
<?php 

$file = @$_FILES['file'];
$error = $success = '';

// Разрешенные расширения файлов.
$allow = array('jpg', 'jpeg', 'png', 'gif');

// Директория, куда будут загружаться файлы.
$path = $_SERVER["DOCUMENT_ROOT"] . '/uploads/';
 
if (!empty($file)) {
	// Проверим на ошибки загрузки.
	if (!empty($file['error']) || empty($file['tmp_name'])) {
		switch (@$file['error']) {
			case 1:
			case 2: $error = 'Превышен размер загружаемого файла.'; break;
			case 3: $error = 'Файл был получен только частично.'; break;
			case 4: $error = 'Файл не был загружен.'; break;
			case 6: $error = 'Файл не загружен - отсутствует временная директория.'; break;
			case 7: $error = 'Не удалось записать файл на диск.'; break;
			case 8: $error = 'PHP-расширение остановило загрузку файла.'; break;
			case 9: $error = 'Файл не был загружен - директория не существует.'; break;
			case 10: $error = 'Превышен максимально допустимый размер файла.'; break;
			case 11: $error = 'Данный тип файла запрещен.'; break;
			case 12: $error = 'Ошибка при копировании файла.'; break;
			default: $error = 'Файл не был загружен - неизвестная ошибка.'; break;
		}
	} elseif ($file['tmp_name'] == 'none' || !is_uploaded_file($file['tmp_name'])) {
		$error = 'Не удалось загрузить файл.';
	} else {
		// Оставляем в имени файла только буквы, цифры и некоторые символы.
		$pattern = "[^a-zа-яё0-9,~!@#%^-_\$\?\(\)\{\}\[\]\.]";
		$name = mb_eregi_replace($pattern, '-', $file['name']);
		$name = mb_ereg_replace('[-]+', '-', $name);

		$parts = pathinfo($name);
		if (empty($name) || empty($parts['extension'])) {
			$error = 'Не удалось загрузить файл.';
		} elseif (!empty($allow) && !in_array(strtolower($parts['extension']), $allow)) {
			$error = 'Недопустимый тип файла';
		} else {
			// Перемещаем файл в директорию.
			if (move_uploaded_file($file['tmp_name'], $path . $name)) {
				// Далее можно сохранить название файла в БД и т.п.
				$success = 'Файл «' . $name . '» успешно загружен.';
			} else {
				$error = 'Не удалось загрузить файл.';
			}
		}
	}

	// Выводим сообщение о результате загрузки.
	if (!empty($success)) {
		echo '<span class="success">' . $success . '</span>';		
	} else {
		echo '<span class="error">' . $error . '</span>';
	}
}
PHP
2

К input file нужно добавить атрибут multiple и дописать к названию – [].

<form id="js-form" method="post" enctype="multipart/form-data">
	<input id="js-file" type="file" name="file[]" multiple>
</form>
 
<div id="result">
	<!-- Сюда выводится результат из uploads.php -->
</div>
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//malsup.github.io/min/jquery.form.min.js"></script>
 
<script>
$('#js-file').change(function() {
	$('#js-form').ajaxSubmit({
		type: 'POST',
		url: '/upload_ajax.php',
		target: '#result',
		success: function() {
			// После загрузки файла очистим форму.
			$('#js-form')[0].reset();
		}
	});
});
</script>
HTML

Меняется PHP-обработчик:

<?php 

$input_name = 'file';
 
// Разрешенные расширения файлов.
$allow = array('jpg', 'jpeg', 'png', 'gif');

// Директория, куда будут загружаться файлы.
$path = $_SERVER["DOCUMENT_ROOT"] . '/uploads/';
 
if (isset($_FILES[$input_name])) {
	// Преобразуем массив $_FILES в удобный вид для перебора в foreach.
	$files = array();
	$diff = count($_FILES[$input_name]) - count($_FILES[$input_name], COUNT_RECURSIVE);
	if ($diff == 0) {
		$files = array($_FILES[$input_name]);
	} else {
		foreach($_FILES[$input_name] as $k => $l) {
			foreach($l as $i => $v) {
				$files[$i][$k] = $v;
			}
		}		
	}	
	
	foreach ($files as $file) {
		$error = $success = '';
 
		// Проверим на ошибки загрузки.
		if (!empty($file['error']) || empty($file['tmp_name'])) {
			switch (@$file['error']) {
				case 1:
				case 2: $error = 'Превышен размер загружаемого файла.'; break;
				case 3: $error = 'Файл был получен только частично.'; break;
				case 4: $error = 'Файл не был загружен.'; break;
				case 6: $error = 'Файл не загружен - отсутствует временная директория.'; break;
				case 7: $error = 'Не удалось записать файл на диск.'; break;
				case 8: $error = 'PHP-расширение остановило загрузку файла.'; break;
				case 9: $error = 'Файл не был загружен - директория не существует.'; break;
				case 10: $error = 'Превышен максимально допустимый размер файла.'; break;
				case 11: $error = 'Данный тип файла запрещен.'; break;
				case 12: $error = 'Ошибка при копировании файла.'; break;
				default: $error = 'Файл не был загружен - неизвестная ошибка.'; break;
			}
		} elseif ($file['tmp_name'] == 'none' || !is_uploaded_file($file['tmp_name'])) {
			$error = 'Не удалось загрузить файл.';
		} else {
			// Оставляем в имени файла только буквы, цифры и некоторые символы.
			$pattern = "[^a-zа-яё0-9,~!@#%^-_\$\?\(\)\{\}\[\]\.]";
			$name = mb_eregi_replace($pattern, '-', $file['name']);
			$name = mb_ereg_replace('[-]+', '-', $name);
			
			$parts = pathinfo($name);
			if (empty($name) || empty($parts['extension'])) {
				$error = 'Недопустимое тип файла';
			} elseif (!empty($allow) && !in_array(strtolower($parts['extension']), $allow)) {
				$error = 'Недопустимый тип файла';
			} else {
				// Перемещаем файл в директорию.
				if (move_uploaded_file($file['tmp_name'], $path . $name)) {
					// Далее можно сохранить название файла в БД и т.п.
					$success = 'Файл «' . $name . '» успешно загружен.';
				} else {
					$error = 'Не удалось загрузить файл.';
				}
			}
		}

		// Выводим сообщение о результате загрузки.
		if (!empty($success)) {
			echo '<p class="success">' . $success . '</p>';		
		} else {
			echo '<p class="error">' . $error . '</p>';
		}
	}
}
PHP
27.09.2019, обновлено 11.03.2024
19345

Комментарии

, чтобы добавить комментарий.

Другие публикации

Как узнать, что пришел запрос через AJAX
Для того чтобы отличить прямой и AJAX-запрос достаточно просто проверить значение глобальной переменной $_SERVER
8878
0
Разрешить AJAX с другого домена
Если отправить кроссдоменный AJAX запрос, возникает ошибка...
7122
+2
Загрузка изображений с превью AJAX + PHP + MySQL
В данной статье представлена упрощенная реализация загрузки изображений с превью через AJAX с сохранением в базу данных...
31210
+22
Автоматическое сжатие и оптимизация картинок на сайте
Изображения нужно сжимать для ускорения скорости загрузки сайта, но как это сделать? На многих хостингах нет...
28440
+8
Работа с Input Text jQuery
Сборник приемов JQuery для работы с текстовыми полями. Во всех примерах используется следующий html код...
128337
+15
Использование API Яндекс Диска на PHP
Можно найти множество применений Яндекс Диска на своем сайте, например, хранение бекапов и отчетов, обновление прайсов,...
55926
+20