Аякс загрузка файлов

Как-то раз, давным-давно, стала передо мной задача написать загрузчик картинок без перезагрузки страницы. "Ничего сложного" - подумал я, и принялся писать. Однако, в процессе работы всё же возникли некоторые подводные камни. Вот об этом я и хочу поговорить

Прежде всего, нужно выбрать принцип. Скажу сразу по секрету, что загружать файлы с помощью AJAX нельзя, зато есть обходной путь. Придуман он не мной, это общеизвестный метод. Итак, нам понадобится: форма загрузки, файл обработки загрузки, 1 фрейм(!).
Как это действует: в форме указан параметр target на фрейм, который можно разместить где-нибудь внизу страницы, а чтобы он не мозолил глаза - прописать ему стиль display: none;
Обработчик формы (параметр action) - скрипт, который, собственно, и выполняет загрузку файла (точней, обработку загрузки), и обязательно выводит код JavaScript, который сообщит о результате загрузки (в случае успеха - выведет изображение, в случае неудачи - описание ошибки)

Итак, код с комментариями:
Файл с формой:

<table>
	<form enctype="multipart/form-data" target="fileuploadhidden" action="upload.php" method="POST">
	<!--в атрибуте target указываем наш фрейм (он ниже), в атрибуте action - имя файла-обработчика-->
	<tr>
		<td>Upload image:</td>
		<td>
			<input type="file" name="imgfile" />
			<input type="submit" name="submit" value="Загрузить" />
		</td>
		<td align="left"> </td>
	</tr>
	<tr>
		<td> </td>
		<td colspan="2"><div id="image"></div></td>
	</tr>
	</form>
	<!--Обратите внимание, если на странице должны вводиться ещё какие-либо данные,
	 то для них нужно сделать отдельную форму, не писать всё в эту форму-->
</table>
<iframe name="fileuploadhidden" id="fileuploadhidden" style="display: none;"></iframe>

Теперь, собственно, файл-обработчик (upload.php):

$response	=	'';
//если файл загрузился без ошибки
if ($_FILES['imgfile']['error']==0){
	//и тип файла - изображение
	if (($_FILES['imgfile']['type']=='image/png')||(($_FILES['imgfile']['type']=='image/jpeg'))||($_FILES['imgfile']['type']=='image/gif')){
		//указываем папку загрузки и даём файлу новое имя (хэш из текущего времени с оригинальным именем файла)
		$filename	=	'images/uploads/'.md5(time().$_FILES['imgfile']['name']).'.jpg';
		//копируем с проверкой
		if (copy($_FILES['imgfile']['tmp_name'], $filename)){
			//если скопировалось - заносим в переменную тег изображения (это уже на ваше усмотрение - можете просто сообщение вывести)
			$response	=	'<img src="'.$filename.'" />';
		}else{
			//если файл не скопировался...
			$response	=	'<span style="color:red;">Невозможно скопировать файл! Проверьте доступ на запись к папке!</span>';
		}
	}else{
		//если файл не картинка...
		$response	=	'<span style="color:red;">Некорректный тип файла! Используйте PNG, JPEG или GIF</span>';
	}
}else{
	//если файл не загрузился на сервер
	$response	=	'<span style="color:red;">Невозможно загрузить файл! Возможно, превышен максимальный размер файла</span>';
}
//вывод. Выводим Javascript
echo '<script language="JavaScript">';

//в родительском документе ищем элемент с айдишником image и вписываем в него результат действий нашего скрипта
echo 'window.parent.document.getElementById("image").innerHTML = "'.$response.'"';
echo '</script>';
?>

Предыдущая статья: PHP sendmail: отправка почты с вложениями посредством PHP Следующая статья: Работа с архивами на php: ZipArchive