<MyRusakov.ru />

PHP и MySQL с Нуля до Гуру 3.0

PHP и MySQL с Нуля до Гуру 3.0

Данный курс научит Вас программировать на самом популярном Web-языке в мире - PHP. Курс состоит из 9 разделов, в которых с нуля рассказывается и показывается процесс написания различных скриптов на PHP.

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

В Бонусе «Создание сайта для библиотеки» Вы увидите применение знаний из основного курса при создании полноценного проекта.

Просмотрев данный курс, Вы сможете создавать абсолютно любые PHP-сайты любой сложности.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Зачем Вы изучаете программирование/создание сайтов?

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

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

Вот и наступила завершающая статья по созданию drag and drop загрузки файлов.

Откроем файл index.html

<!-- предыдущий код -->
var upload = function(files) {
  var formData = new FormData(),
      xhr = new XMLHttpRequest(),
      x;

  for(x = 0; x < files.length; x++) {
   formData.append('file[]', files[x]);
  }

  xhr.onload = function() {
   var data = JSON.parse(this.responseText);
   displayUploads(data);
  };

  xhr.open('post', 'upload.php');
  xhr.send(formData);
};

Функция upload, как понятно из названия, отправляет файлы серверу на загрузку. В качестве аргумента передаются файлы. В начале функции мы создаём объект formData, который позволяет передавать формы напрямую. Также создаётся знакомый нам объект XMLHttpRequest, позволяющий отправлять ajax запросы, и мы объявляем переменную x. Затем в цикле мы перебераем полученные файлы и записываем их в массив file[]. Дальше мы просто отправляем formData нашему php скрипту, а, когда вернётся ответ, и сработает событие onload, мы распарсим нашу json строку и выведим названия загруженных файлов с помощью функции displayUploads, о которой мы поговорим чуть позже. Вызывать функцию upload мы будем, когда сработает событие drop, а в качестве аргумента передадим свойство files объекта dataTransfer, которое хранит перетаскиваемые нами файлы.

dropzone.ondrop = function(e) {
  this.className = 'dropzone';
  this.innerHTML = 'Перетащите файлы сюда';
  e.preventDefault();
  upload(e.dataTransfer.files);
};

Теперь рассмотрим функцию displayUploads

var displayUploads = function(data) {
  var uploads = document.getElementById("uploads"),
      anchor,
      x;

  for(x = 0; x < data.length; x++) {
   anchor = document.createElement('li');
   anchor.innerHTML = data[x].name;
   uploads.appendChild(anchor);
  }
};

Она служит лишь для вывода. Принимает данные, перебирает их в цикле и для каждого файла создаёт элемент li, внутрь которого помещает название.

Вот и всё! Мы закончили создавать систему загрузки файлов в стиле drag and drop и, напоследок, приведу полный код файла index.html

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Drag and Drop</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>Загруженные файлы:</p>
  <div id="uploads">
   <ul>

   </ul>
  </div>
  <div class="dropzone" id="dropzone">Перетащите файлы сюда</div>
  <script>
   (function() {
    var dropzone = document.getElementById("dropzone");

    dropzone.ondrop = function(e) {
     this.className = 'dropzone';
     this.innerHTML = 'Перетащите файлы сюда';
     e.preventDefault();
     upload(e.dataTransfer.files);
    };

    var displayUploads = function(data) {
     var uploads = document.getElementById("uploads"),
         anchor,
         x;

     for(x = 0; x < data.length; x++) {
      anchor = document.createElement('li');
      anchor.innerHTML = data[x].name;
      uploads.appendChild(anchor);
     }
    };

    var upload = function(files) {
     var formData = new FormData(),
      xhr = new XMLHttpRequest(),
      x;

     for(x = 0; x < files.length; x++) {
      formData.append('file[]', files[x]);
     }

     xhr.onload = function() {
      var data = JSON.parse(this.responseText);
      displayUploads(data);
     };

     xhr.open('post', 'upload.php');
     xhr.send(formData);
    };

    dropzone.ondragover = function() {
     this.className = 'dropzone dragover';
     this.innerHTML = 'Отпустите мышку';
     return false;
    };

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

   }());
  </script>
</body>
</html>

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (1):

shamil shamil 15.11.2020 22:20:42

Здравствуйте. Когда я покидаю страницу формы загрузки появляется сообщение ошибки сценария страницы не удалось задать свойство "ondrop" ссылки. Не знаете как это исправить?

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.