Drag and drop завантаження файлів на сервер. Частина 1.

Відео: Завантаження файлів на сервер шляхом перетягування. Частина 2

Продовжуємо практикуватися і сьогодні ми почнемо створювати drag and drop завантаження файлів на сервер.

Ви, напевно, повинні були бачити в соціальних мережах і на деяких сайтах завантаження файлів простим перетягуванням в якусь область на сторінці. Ось і ми реалізуємо таку ж з нуля. Сьогодні давайте створимо розмітку.

Відео: HTML5 Drag and Drop Uploading

HTML

 
 
Drag and Drop 
charset="Utf-8"gt; 
 
 
 Завантажені файли: 
id="Uploads"gt; 
 
 
 
 
class="Dropzone"id="Dropzone"gt;Перетягніть файли сюди

Тут все просто: блок з #dropzone буде нашою областю для завантаження файлів, а блок з #uploads буде містити в собі ненумерований список, де будуть виводитися імена завантажених файлів.

Відео: PHP РОБОТА З ФАЙЛАМИ. Завантаження файлів на сервер (частина 2)

CSS

body { 
 background: rgba(211,211,100,.5) - 
 font:20pxArial- 
} 
 
.dropzone { 
 width:300px- 
 height:300px- 
 border:2px dashed # aaa- 
 color:# aaa- 
 line-height:280px- 
 text-align: center- 
 position: absolute- 
 left:50% - 
 margin-left:-150px- 
 top:50% - 
 margin-top:-150px- 
} 
 
.dropzone.dragover { 
 color: green- 
 border:2px dashed # 000- 
}

Стилі теж прості: вирівнюємо наш блок і текст всередині нього по центру, задаємо йому рамку, колір і розмір. Клас .dragover буде застосовуватися в майбутньому для блоку, коли над ним буде якийсь файл, але це вже буде робитися за допомогою jаvascript.

Відео: Drag and Drop (File API)

На цьому закінчимо і ось, що ми маємо зараз:

drag and drop

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

Схожі