Загрузить изображение на сервер через iframe без перезагрузки страницы (jq, php)

В этой статье я опишу процесс загрузки изображения на сервер без обновления страницы средствами php (можно переделать под загрузку файлов с любым, нужным вам, расширением).

Для данного примера нам понадобится форма с полем для указания пути к файлу и кнопкой загрузки файла. Так же на странице будет располагаться тег для отображения загруженной картинки и сам iframe, через который, собственно, и будет происходить загрузка изображения без обновления страницы.

По началу я негативно относился к расположению на странице поля iframe, но это исключительно предубеждения и ничего плохого он нам не сделает, даже не помешает, т.к. будет скрыт.

Html:

<form method="post" enctype="multipart/form-data" action="work.php" target="imgframe">
   <input type="file" id="img_src" required="required" accept="image" name="img_src">
   <input type="submit" value="Загрузить" />
</form>
<img id="image" src="" />
<iframe style="visibility: hidden; display: none;" id="imgframe" name="imgframe">
</iframe>

JavaScript:

Чтобы после загрузки изображения отобразить его, воспользуемся небольшим JavaScript, который будет вызываться из iframe при получении ответа от сервера о том, что изображение загружено.

function work(obj) {
    $("#image").attr("src", obj);
}

Php:

Здесь я сделал свою небольшую проверку на соответствие расширения файла необходимому и преобразовал имя файла в md5 так же для минимальной защиты от загрузки файлов php скриптов под видом картинок.

<?php	// work.php
header("Content-Type:text/html;charset=UTF-8"); // Кодирока
if ($_SERVER['REQUEST_METHOD'] == 'POST') { 	// Если POST запрос
    if ($_FILES['img_src']){			// Есть ли файл 		
		
	// Моя небольшая проверка и преобразование имени
	$up_dir = './img/';				 // Папка для загрузки
	$wl = array('.jpeg', '.jpg', '.png', '.gif');    // Белый список расширений
	$real_name = $_FILES['img_src']['name'];	 // Имя файла
	$ext = '.'.mb_strtolower(pathinfo($real_name, PATHINFO_EXTENSION)); // Расширение    
	$up_file = md5($real_name).$ext;	// Имя файла в md5 + его расширение
		
	if (in_array($ext, $wl)){	        // Если расширение есть в белом списке
	    if (move_uploaded_file($_FILES['img_src']['tmp_name'], $up_dir.$up_file)) {
		// Файл загружен, выполняем скрипт на странице
		echo '<script> window.top.work("'.$up_dir.$up_file.'"); </script>';
	    } else {
		/ Ошибка при загрузке
	    }
	} else {
	    // Не корректное расширение
	}
    }
}
?>