Drag and Drop загрузка файлов на сервер. Часть 2.

Starkark

Заблокирован
Сообщения
0
Симпатии
0
Баллы
0
Продолжаем создавать нашу drag and drop загрузку, а сегодня мы напишем наш сервер и начнём писать JavaScript код.

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

  • .htaccess
  • index.html
  • style.css
  • upload.php
  • uploads
С файлами index.html и style.css всё понятно. В файле .htaccess у нас просто прописана кодировка, чтобы не было проблем.
Код:
AddDefaultCharset UTF-8
Файл upload.php будет загружать файлы на сервер в папку uploads.

Итак, давайте начнём с php. Для этого откройте файл upload.php и пропишите следующее:
Код:
<?php
header("Content-Type: application/json");

$uploaded = array();

if(!empty($_FILES['file']['name'][0])) {
foreach($_FILES['file']['name'] as $position => $name) {
if(move_uploaded_file($_FILES['file']['tmp_name'][$position], 'uploads/'.$name)) {
$uploaded[] = array(
'name' => $name,
'file' => 'uploads/'.$name
);
}
}
}

echo json_encode($uploaded);
?>
В начале файла мы прописываем заголовок Content-Type, чтобы сообщить браузеру, что он получит json. После создаём пустой массив $uploaded и проверяем, есть ли вообще какие-то файлы. Если да, то перебираем их и загружаем в нашу директорию uploads, а, также, заполняем наш главный массив $uploaded подмассивами, которые будут содержать информацию о файлах. В нашем случае это имя файлаи его месторасположения. Наконец, мы преобразовываем наш массив в json и выводим его. Как видите, сервер вовсе несложный.

Теперь перейдём к файлу index.html
Код:
<!-- остальной код -->
<div class="dropzone" id="dropzone">Перетащите файлы сюда</div>
<script>
(function() {
var dropzone = document.getElementById("dropzone");
dropzone.ondragover = function() {
this.className = 'dropzone dragover';
this.innerHTML = 'Отпустите мышку';
return false;
};

dropzone.ondragleave = function() {
this.className = 'dropzone';
this.innerHTML = 'Перетащите файлы сюда';
return false;
};

dropzone.ondrop = function(e) {
this.className = 'dropzone';
this.innerHTML = 'Перетащите файлы сюда';
e.preventDefault();
};
})();
</script>
Помните класс .dragover, который мы написали в прошлой статье, и я говорил, что он будет применяться, когда над нашим блоком будет какой-то файл? Вот, собственно, это мы сейчас и сделали. Когда над блоком появляется какой-то файл, срабатывает событие ondragover, где мы просто добавляем наш класс .dragover и меняем текст на "Отпустите мышку". Когда же мы отводим мышку с файлом от нашего блока, то срабатываем событие ondragleave, где мы возвращаем всё в исходное положение. Когда человек "бросает" файл в наш блок, то срабатывает событие ondrop. Там мы снова всё меняем, как было в начале, иначе у нас "зависнет" класс .dragover и отменяем поведение по-умолчанию. Если мы этого не сделаем, то наш файл просто откроется в браузере, чего нам не нужно.