jQuery Form Plugin - Загрузка файлов через AJAX.


Содержание

  1. Загрузка одного файла на AJAX
  2. Загрузка нескольких файлов на AJAX

Плагин формы jQuery Form Plugin позволяет очень просто отправлять файлы из HTML-формы при использовании AJAX.

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

  1. На поле выбора файла с id="js-file" повешено jquery событие change.
  2. При выборе файла срабатывает событие и выполняется метод плагина ajaxSubmit, он все поля из формы с id="js-form" включая выбранный файл отправляет на uploads.php.
  3. Далее то что отдаст uploads.php выведется в 
    ...
    .
  4. После завершения, форма очищается методом reset() т.к. input file останется с выбранным файлом.

Ajax. Загрузка одного файла.

HTML
<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>

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

Код файла обработчика upload_ajax.php

PHP
<?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>';
	}
}

Ajax. Загрузка нескольких файлов.

Что бы выбрать для загрузки на сервер сразу несколько файлов нужно к input file нужно добавить атрибут multiple и дописать к названию – [].

HTML
<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>

JS
<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>

Нужно изменить и файл обработчика.

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>';
		}
	}
}

Источник: © https://snipp.ru/php/uploads-files-ajax
Дата публикации: 

ТОП 10 случайных публикаций



Сайт разработан студией © WEB-VidST   


Яндекс.Метрика