Загрузка файлов на сервер путем перетаскивания. Часть 1

Дата публикации: 2015-06-17

Загрузка файлов на сервер путем перетаскивания

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

Введение

Загрузка фалов на сервер, достаточно распространенная задача в сайтостроении, и в большинстве случаев она решается путем добавления на страницу стандартного поля формы file:

Но использование данного поля не всегда удобно, да и его стандартный дизайн, не всегда совместим с дизайном веб-страниц. В данное время, очень популярны загрузки на сервер путем перетаскивания фалов в специально отведенную область сайта. Примером может служить сайт //disk.yandex.ru:

В данном уроке мы с Вами начнем создавать механизм загрузки файлов на сервер путем перетаскивания, и поможет нам в этом один из виджетов библиотеки Formstone – Upload, который как раз разработан для этих целей (официальный сайт библиотеки //formstone.it/).

Виджет Upload

Итак, на тестовой странице удаляем элемент формы file и вместо него располагаем обычный блок

, который будет служить областью приема файлов:

<div class="upload"></div>

1	<div class="upload"></div>

Полный код тестовой страницы:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="css/style.css" rel="stylesheet"> 
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/core.js"></script>
</head>
  
<body>
  
<style>
</style>

<script>
</script>

<div class="wrap" style="background-color:#ffffff;padding:30px;">
<h1>Пример Upload!!!</h1>
	<div class="upload"></div>
</div>
</body></html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<style>

</style>

</script>

<h1>Пример Upload!!!</h1>

</div>

</body></html>

Обратите внимание, на данной странице уже подключена библиотека jQuery и ядро библиотеки Formstone. Далее подключаем виджет и его файл стилей (в файловой структуре тестовой страницы уже содержатся данные элементы).

<link href="css/upload.css" rel="stylesheet">
<script src="js/upload.js"></script>

1 2	<link href="css/upload.css" rel="stylesheet"> <script src="js/upload.js"></script>

Теперь необходимо, при помощи библиотеки jQuery выбрать блок, который служит областью приема файлов и вызвать метод upload():

jQuery('document').ready(function($) {
		$('.upload').upload();
	});

jQuery('document').ready(function($) {

$('.upload').upload();

});

Теперь давайте перейдем в браузер и посмотрим, что изменилось:

Как Вы видите, внешний вид приемного блока изменен, теперь если перетащить файл, или несколько файлов в данный блок будет выполнена асинхронная (методом AJAX) отправка элементов на сервер. Но при этом виджет Upload не сохраняет фалы на сервере, он только собирает информацию о тех файлах которые необходимо отправить и, используя метод AJAX отправляет запрос (запрос типа POST) на сервер с необходимыми заголовками. В этом мы можем убедиться, если посмотрим консоль JavaScript:

Теперь необходимо указать некоторые настройки:

jQuery('document').ready(function($) {
		$('.upload').upload({
			action:'obr.php',
			label:'Перетащите файл в блок загрузки',
			postKey:'newfile',
			maxQueue:1,
			maxSize:10485760,
			postData:{
				name:'User',
				ip:'127.0.0.1'
			}
		})
	});

jQuery('document').ready(function($) {

$('.upload').upload({

action:'obr.php',

label:'Перетащите файл в блок загрузки',

postKey:'newfile',

maxQueue:1,

maxSize:10485760,

postData:{

name:'User',

ip:'127.0.0.1'

}

})

});

Основные настройки виджета:

action – файл на сервере, который обработает переданные данные(сохранит файл на сервере);

label – строка которая отображается в приемнике файлов;

postKey – имя поля в запросе;

maxQueue — максимальное количество одновременно отправляемых запросов;

maxSize – максимальный размер передаваемого файла;

postData — дополнительные данные, которые будут переданы POST запросом на сервер.

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

Скрипт обработчик.

Скрипт обработчик, должен принять данные и выполнить определенные манипуляции, в нашем случае – сохранить передаваемые файлы в определенную папку сервера. Поэтому создаем новый файл obr.php и добавляем следующий код:

<?php
if($_SERVER['REQUEST_METHOD'] == 'POST') {
	if(!empty($_FILES['newfile'])) {
		if(move_uploaded_file($_FILES['newfile']['tmp_name'],'uploads/'.$_FILES['newfile']['name'])){
			echo 'OK';
		}
		else {
			echo 'ERROR';
		}
	}
}
?>

<?php

if($_SERVER['REQUEST_METHOD'] == 'POST') {

if(!empty($_FILES['newfile'])) {

if(move_uploaded_file($_FILES['newfile']['tmp_name'],'uploads/'.$_FILES['newfile']['name'])){

echo 'OK';

}

else {

echo 'ERROR';

}

Как Вы видите, в данном файле я описал в самом простейшем виде скрипт сохранения файлов загруженных на сервер по протоколу HTTP POST, но для тестирования виджета вполне подойдет. В реальном же случае, перед сохранением загруженного файла, нужно было бы проверить размер и тип файла, то есть проверить разрешено ли загружать данный файл на сервер, а возможно и проверить права пользователя, то есть опять же, разрешено ли ему загружать файлы на сервер. Но это не тема данного урока, поэтому описанного кода вполне хватит.

Обратите внимание, что если к данному файлу мы обращаемся асинхронно, то весь вывод на экран, будет возвращен в качестве ответа от сервера. Поэтому если файл загружен, мы будем возвращать ‘OK’, в противном же случае — ‘ERROR’. Теперь давайте протестируем наш скрипт:

После перемещения файла в область загрузки, в консоли JavaScript мы видим, что файл был передан и в качестве ответа, была возвращена строка OK. При этом в папке uploads, появился новый сохраненный файл.

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

Всего Вам доброго и удачного кодирования!!!

Метки: загрузка файлов