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

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

Продолжаем создавать нашу 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 и отменяем поведение по-умолчанию. Если мы этого не сделаем, то наш файл просто откроется в браузере, чего нам не нужно.

Итак, вот, что у нас получилось сейчас: