Drag & Drop

viiprogrammer · April 11, 2015

Загрузка файлов с 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

JacksScripts · April 12, 2015

Для тех кто работает по примерам, очень отличная штука

JacksScripts · April 12, 2015

Dragn & Drop Ошибка в слове "Dragn", пишеться "Drag"

viiprogrammer · April 12, 2015

Dragn & Drop Ошибка в слове "Dragn", пишеться "Drag"

Упс!

Sign In

Drag & Drop

Recommended Posts

viiprogrammer

Link to comment

Share on other sites

JacksScripts

Link to comment

Share on other sites

JacksScripts

Link to comment

Share on other sites

viiprogrammer

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Downloads