Вот и наступила завершающая статья по созданию drag and drop загрузки файлов .
Вот и наступила завершающая статья по созданию 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>
