Загрузка файлов на сервер через iframe

Загрузить файл на сервер посредством ajax-технологии невозможно, по той лишь причине, что классический способ асинхронной отправки данных на сервер – это отправка данных посредством использования объекта XmlHttpRequest. Из соображений безопасности данный объект не поддерживает передачу файлов на сервер. Как бы грустно это не звучало, но на данный момент времени не существует непосредственной Ajax-загрузки файлов на сервер. Однако, как и везде, есть небольшие хитрости, и об одной из них мы сейчас поговорим.

Чтобы загрузить файл на странице без перезагрузки, мы можем воспользоваться HTML тегом iframe. Простыми словами мы размещаем обыкновенный фрейм на странице, и если вы для формы, где находится поле для загрузки файла, мы задаем атрибут target = имя фрейма. Таким образом, отправляться форма будет уже не через текущую страницу, а через фрейм, добавленный на странице. Нам же остается сделать фрейм невидимым (style="display:none"), таким образом, на самой странице будет размещаться только сама форма загрузки файлов.

Создаем страницу form.html, размещаем на ней фрейм и форму:

<iframe style="display: none;" id="fileupload" name="fileupload"></iframe>


<form method="post" enctype="multipart/form-data" action="upload.php" target="fileupload">
	<input name="userfile" type="file">
	<input type="submit" value="Послать" />
</form>


<div class="file-upload-log"></div>

Создаем скрипт, который будет принимать, и обрабатывать файл, имя скрипта должно быть указано в атрибуте action на форме выше. В нашем случае файл-обработчик будет называться upload.php.

<?php
$arRes = array('msg' => '');

if (isset($_FILES['userfile'])){
	
	$arRes = array();
	
	// дирректория, где куда следует сохранять файлы
	$uploaddir = $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'upload' . DIRECTORY_SEPARATOR;
	
	// полный путь к файлу на сервере
	$uploadfile = $uploaddir . basename($_FILES['userfile']['name']);
	
	// сохраняем передаваемый файл
	if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)){
		$arRes['msg'] = "Файл загружен успешно!";
	} else {
		$arRes['msg'] = "При загрузке файла возникла ошибка!";
	}
}

echo json_encode($arRes);
?>

Таким образом, файл будет передаваться на сервер через фрейм, привычным образом, однако результат во фрейме будет возвращен в формате json. На странице нам предстоит обработать передаваемый от скрипта во фрейм результат и вывести его на странице (посредством javascript), все действительно просто.

<script>
$("iframe#fileupload").load(function(){
	
	var jsonFile = $(this).contents().find('body').html();
	
	if (jsonFile.length > 0){

		upl = $.parseJSON(jsonFile);

		if (upl.msg != ''){
			
			$(".file-upload-log").html(upl.msg);

		}
	}
});
</script>

Таким образом, на странице будет форма, при выборе файла и отправке на сервер, страница не будет перезагружаться, а файл будет отправлен посредством iframe. После того как скрипт обработает файл и вернет результат во фрейм в формате json, посредством javascript мы считываем результат, и выводим сообщение в блоке <div class="file-upload-log"></div>.

Обратите внимание на то, что это простой пример, в действительности при загрузке файлов следует сделать проверку файла более тщательную, а так же, скорее всего, адаптировать скрипт вывода сообщений под свои нужды. Кроме того, вы можете стилизовать input file, так как стандартное поле выбора файла может отображаться в разных браузерах по разному.