Перейти к содержанию
CMSTOOLS.org - форум поддержки и развития CMS

Drag & Drop

viiprogrammer

Автор viiprogrammer
в JS + фреймворки

 Поделиться

Рекомендуемые сообщения

viiprogrammer Профессионал

viiprogrammer

Опубликовано
Опубликовано

Загрузка файлов с Dragn & Drop

 

и так создадим файл назавём его index.html с таким содержимым

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Drag and Drop</title>
  <style>
  body {
  background: #FFF;
  font: 20px Arial;
}

.dropzone {
  width: 300px;
  height: 300px;
  border: 2px dashed #BAC7D4;
  color: #BAC7D4;
  line-height: 280px;
  text-align: center;
  position: absolute;
  left: 50%;
  ;
  top: 50%;
  margin-top: -150px;
}

.dropzone.dragover {
  color: #BAC7D4;
  border: 2px dashed #BAC7D4;
}
  </style>  
</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>

После создадим upload.php

<?php
  header("Content-Type: application/json");

  $uploaded = array();

  if(!empty($_FILES['file']['name'][0])) {
   foreach($_FILES['file']['name'] as $position => $name) {
	
	$path_info = pathinfo($name);
	if($path_info['extension'] == 'png' or $path_info['extension'] == 'gif' or $path_info['extension'] == 'zip' or $path_info['extension'] == 'jpg' or $path_info['extension'] == 'rar'){
    if(move_uploaded_file($_FILES['file']['tmp_name'][$position], 'uploads/'.$name)) {
     $uploaded[] = array(
      'name' => 'Файл '.$name.' загружен',
      'file' => 'uploads/'.$name
     );
    }
	}else  $uploaded[] = array('name' => 'Не правильный формат', 'file' => '');
   }
  }

  echo json_encode($uploaded);
?>

И не забываем создать папку uploads с правами 777

post-6-0-88247100-1428773807_thumb.png

post-6-0-43423900-1428773808_thumb.png

  • Upvote 1
Ссылка на комментарий
Поделиться на другие сайты
 Поделиться
Перейти к списку тем
×
×
  • Создать...