Pull to refresh

Загрузка картинок на сервер с использованием HTML5+jQuery+PHP

Reading time 4 min
Views 41K
Доброго времени суток!

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

Что нам понадобится?


Всего лишь небольшие знания HTML5+jQuery+PHP.

Ну что, поехали.



Для начала распишем работу нашего мини приложения.

1) Пользователь выбирает на своем ПК один или несколько файлов(в нашем случае графических файлов) и перетаскивает эти файлы в окно браузера который поддерживает Drag & Drop API(если точнее, то пользователь переносит файлы в специально отведенное место для загрузки).
2) После этого у нас срабатывает событие и при помощи API мы получаем информацию о загружаемых файлах и сохраняем их во временной памяти.
3)Далее, используя новый метод передачи sendAsBinary объекта XMLHttpRequest, посылаем наш файл из временной памяти на сервер.

Возможно, выше описанное не совсем понятно, но сейчас все всё поймут.

Велосипед изобретать не будем возьмем jQuery плагин FileDrop. Но так как велосипед мы не изобрели, есть один недостаток: данный плагин работает только в браузерах Firefox и Chrome. В этом нет ничего удивительного, ведь мы пишем приложение с использованием HTML5, а его поддерживают ещё не все основные браузеры. Но не будем на этом останавливаться идем далее.

Создаем файл index.html
С таким содержанием:
<!DOCTYPE html>
<html>
	<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
        <title>Загрузка файлов при помощи Drag & Drop API.</title>
        <link rel="stylesheet" href="css/styles.css" />
    </head>
    <body>
        <!-- Создаем поле в которое мы будим переносить наши файлы -->
		<div id="dropbox">
        	<!-- Напишем пояснительную записку в которой укажем что файлы необходимо кидать именно сюда -->
			<span class="message">Перенесите сюда изображения для загрузки</span>
		</div>
        <!-- Подключаем библиотеку jQuery -->
		<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
		<!-- Подключаем плагин FileDrop -->
		<script src="js/jquery.filedrop.js"></script>
		<!-- Так же подключим еще один js скриптик которые напишем далее -->
        <script src="js/script.js"></script>

    </body>
</html>


Идем далее..


Теперь создадим наш обработчик, в котором соединим действие плагина FileDrop и библиотеки jQuery, а так же создадим небольшие ограничения.
$(function(){
	
	var dropbox = $('#dropbox'),
		message = $('.message', dropbox);
	
	dropbox.filedrop({
		paramname:'pic',
		
		maxfiles: 5,
    	maxfilesize: 2,
		url: 'post_file.php',
		
		uploadFinished:function(i,file,response){
			$.data(file).addClass('done');
		},
		
    	error: function(err, file) {
			switch(err) {
				case 'BrowserNotSupported':
					showMessage('Ваш Браузер не поддерживает HTML5!');
					break;
				case 'TooManyFiles':
					alert('Разрешено загружать за 1 раз не более 5 изображений');
					break;
				case 'FileTooLarge':
					alert(file.name+' Слишком большой.Разрешена загрузка файлов не более 2мб.');
					break;
				default:
					break;
			}
		},

		beforeEach: function(file){
			if(!file.type.match(/^image\//)){
				alert('Разрешена загрузка только изображений!!!!');
				return false;
			}
		},
		
		uploadStarted:function(i, file, len){
			createImage(file);
		},
		
		progressUpdated: function(i, file, progress) {
			$.data(file).find('.progress').width(progress);
		}
    	 
	});
	
	var template = '<div class="preview">'+
						'<span class="imageHolder">'+
							'<img />'+
							'<span class="uploaded"></span>'+
						'</span>'+
						'<div class="progressHolder">'+
							'<div class="progress"></div>'+
						'</div>'+
					'</div>'; 
	
	
	function createImage(file){

		var preview = $(template), 
			image = $('img', preview);
			
		var reader = new FileReader();
		
		image.width = 100;
		image.height = 100;
		
		reader.onload = function(e){

			image.attr('src',e.target.result);
		};
		
		reader.readAsDataURL(file);
		
		message.hide();
		preview.appendTo(dropbox);
		
		$.data(file,preview);
	}

	function showMessage(msg){
		message.html(msg);
	}

});


Ну а теперь, сверстаем наше приложение и оформим его создав файл styles.css(находится в архиве с исходниками)

На этом, мы заканчиваем с клиентской частью, и переходим к серверной.
Напишем небольшой php обработчик:
<?php
//Создадим пару вспомагательных функций
function exit_status($str){
	echo json_encode(array('status'=>$str));
	exit;
}

function get_extension($file_name){
	$ext = explode('.', $file_name);
	$ext = array_pop($ext);
	return strtolower($ext);
}

$upload_dir = 'uploads/'; //Создадим папку для хранения изображений
$allowed_ext = array('jpg','jpeg','png','gif'); //форматы для загрузки


if(strtolower($_SERVER['REQUEST_METHOD']) != 'post'){
	exit_status('Ошибка при отправке запроса на сервер!');
}


if(array_key_exists('pic',$_FILES) && $_FILES['pic']['error'] == 0 ){
	
	$pic = $_FILES['pic'];
	
	if(!in_array(get_extension($pic['name']),$allowed_ext)){
		exit_status('Разрешена загрузка следующих форматов: '.implode(',',$allowed_ext));
	}	

//Загружаем файл на сервер в нашу папку и посылаем команду о том, что все ОК и файл загружен
	if(move_uploaded_file($pic['tmp_name'], $upload_dir.$pic['name'])){
		exit_status('Файл Был успешно загружен!');
	}
	
}

exit_status('Во время загрузки произошли ошибки');

?>

Вот, собственно, и всё! Теперь запускаем наш локальный сервер, открываем сайт ну и тестируем. Должно получиться примерно так:
1) Просто открытая страница браузера

2) Загрузка 1-го файла

3) Загрузка 2-го файла

4) Загрузка 6-ти файлов


На этом всё. Если мы проверим папку uploads, то в ней вы увидите все загруженные картинки.

Исходники тут
Демо версия тут
Спасибо за ваше внимание!

PS. Как цель, я не ставил перед собой задачу сделать полностью рабочее приложение для загрузки файлов на сервер и дальнейшего их просмотра. А хотел, всего лишь, продемонстрировать достаточно новый способ загрузки, который, как я думаю, многим был интересен.
Tags:
Hubs:
+25
Comments 52
Comments Comments 52

Articles