Jump to content

Drag & Drop


viiprogrammer
 Share

Recommended Posts

Загрузка файлов с 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
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...