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 lt; 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 lt; data.length- x++){ 
 anchor = document.createElement(`Li`) - 
 anchor.innerHTML = data[x].name- 
 uploads.appendChild(anchor) - 
} 
} -

Вона служить лише для виводу. Приймає дані, перебирає їх у циклі і для кожного файлу створює елемент li, всередину якого поміщає назву.

От і все! Ми закінчили створювати систему завантаження файлів в стилі drag and drop і, наостанок, наведу повний код файлу index.html

 
lang="Ru"gt; 
 
charset="UTF-8"gt; 
Drag and Drop 
rel="Stylesheet"href="Style.css"gt; 
 
 
 Завантажені файли: 
id="Uploads"gt; 
 
 
 
 
class="Dropzone"id="Dropzone"gt;Перетягніть файли сюди

Поділися в соціальних мережах:

Схожі