Продолжаем практиковаться и сегодня мы начнём создавать drag and drop загрузку файлов на сервер.
Продолжаем практиковаться и сегодня мы начнём создавать drag and drop загрузку файлов на сервер.
Вы, наверное, должны были видеть в социальных сетях и на некоторых сайтах загрузку файлов простым перетаскиванием в какую-то область на странице. Вот и мы реализуем такое же с нуля. Сегодня давайте создадим разметку.
HTML
<html>
<head>
<title>Drag and Drop</title>
<meta charset="utf-8">
</head>
<body>
<p>Загруженные файлы:</p>
<div id="uploads">
<ul>
</ul>
</div>
<div class="dropzone" id="dropzone">Перетащите файлы сюда</div>
</body>
</html>
Здесь всё просто: блок с #dropzone будет нашей областью для загрузки файлов, а блок с #uploads будет содержать в себе ненумерованный список, где будут выводиться имена загруженных файлов.
CSS
body {
background: rgba(211,211,100, .5);
font: 20px Arial;
}
.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 будет применяться в будущем для блока, когда над ним будет какой-то файл, но это уже будет делаться с помощью JavaScript.
На этом закончим и вот, что мы имеем сейчас:
