AJAX-загрузчик файлов изображений

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Технологии AJAX позволяют сделать много интересных вещей, которые происходят в реальном времени и без перезагрузки страницы. Так, например, можно добавлять комментарии или загружать файлы на сервер и при этом сразу наблюдать результат. В этом небольшом уроке рассмотрим вариант загрузки на сервер одиночных файлов изображений.

Загруженные файлы на сервере будут находиться в папке uploads.

Установка на сайт

Установка очень проста, всего лишь нужно выполнить несколько шагов:

1. Скачайте архив с исходными файлами и распакуйте в отдельную папку на компьютере;
2. Папку imageloader целиком закачайте на сервер сайта;
3. Откройте индексный файл и проверьте работу скрипта. Для корректной работы включите поддержку JavaScript в вашем браузере.

На этом можно и закончить, но, если Вам интересны детали, позволю себе несколько пояснений.

1. В файле index.html в разделе head подключаются библиотека jQuery, ajax и стили из соответствующих папок:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="js/ajaxupload.3.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/styles.css">

Здесь же находится ещё один скрипт, ответственный за загрузку изображений:

<script type="text/javascript" >
	$(function(){
		var btnUpload=$('#upload');
		var status=$('#status');
		new AjaxUpload(btnUpload, {
			action: 'upload-file.php',
			name: 'uploadfile',
			onSubmit: function(file, ext){
				 if (! (ext && /^(bmp|jpg|png|jpeg|gif)$/.test(ext))){  
                    // extension is not allowed 
					status.text('Поддерживаемые форматы bmp, jpg, jpeg, png, gif');
					return false;
				}
				status.text('Загрузка...');
			},
			onComplete: function(file, response){
				//On completion clear the status
				status.text('');
				//Add uploaded file to list
				if(response==="success"){
					$('<li></li>').appendTo('#files').html('<img src="./uploads/'+file+'" alt=""><br>'+file).addClass('success');
				} else{
					$('<li></li>').appendTo('#files').text('Файл не загружен!' + file).addClass('error');
				}
			}
		});
		
	});
</script>

          Указание расширения файлов изображений, которые можно загружать;

          Файлы будут загружены в папку uploads.

2. А в разделе body расположим форму загрузки с кнопкой:

<h1>AJAX-загрузчик файлов изображений</h1>
		
<div id="upload"><span>Выбрать файл<span></div><span id="status"></span>
		
<ul id="files"></ul>

          С помощью этого участка кода до перезагрузки страницы будет выводиться превью загруженного файла изображения или сообщение об ошибке.

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

3. В файле upload-file.php также указан путь к папке с изображениями на сервере и типы файлов:

 
<?php
$uploaddir = './uploads/'; 
$file = $uploaddir . basename($_FILES['uploadfile']['name']); 
 
$ext = substr($_FILES['uploadfile']['name'],strpos($_FILES['uploadfile']['name'],'.'),strlen($_FILES['uploadfile']['name'])-1); 
$filetypes = array('.bmp','.jpg','.png','.jpeg','.gif','.BMP','.JPG','.PNG','.JPEG','.GIF');
 
if(!in_array($ext,$filetypes)){
	echo "<p>Данный формат файлов не поддерживается</p>";}
else{ 
	if (move_uploaded_file($_FILES['uploadfile']['tmp_name'], $file)) { 
	  echo "success"; 
	} else {
		echo "error";
	}
}
 
?> 

На этом всё. Спасибо за внимание. Посещайте мой сайт. До скорых встреч! Пока! L.M.