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

Starkark

Заблокирован
Сообщения
0
Симпатии
0
Баллы
0
Вот и наступила завершающая статья по созданию 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>