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;Перетягніть файли сюди
- Bluetooth file transfer
- Ponydroid
- Drag and drop завантаження файлів на сервер. Частина 1.
- Як зробити випадаючий список з красивим ефектом на css і jquery.
- Як динамічно отримувати коментарі з бази даних.
- Nodejs. Як обробляти post запити.
- Команда del (erase)
- Створення движка на mvc. Створюємо можливість додавання користувача в базу даних через адмін панель
- Відправка асинхронних запитів на jquery.
- Відправка post-запитів через jаvascript
- Створення движка на mvc. Закінчуємо роботу з чатом.
- Динамічне завантаження файлів на jquery
- Перевірка форми в jаvascript
- Відправка ajax-запиту на інший домен
- Створення движка на mvc. Продовжуємо роботу над чатом.
- Дерево директорії на php
- Створення движка на mvc. Пишемо роутер.
- Проста галерея на php
- Nodejs. Запис і читання файлів.
- Автоматичне резервне копіювання на php
- Пошук по файлах на php