Drag and drop for upload concept | Sanwebcorner

Drag and drop for upload concept

This is one of the method to upload the file in directory using php and javascript. This method is used to drag the files in a specified place to upload the files using php and javascript.

upload files drag and drop


index.php:


<!DOCTYPE html>

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Drag and drop for upload</title>

<script type="text/javascript" src="js/tuDDUpload.js"></script>
<script type="text/javascript">
  window.onload = function() {
    options={
      dragZone:"dragZone",
      uploadUrl:"upload.php",
      resultArea:"result"
      };
      initDDUpload(options);
   };
</script>
<style type="text/css">

 #dragZone{
border: 2px dashed #F60;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color:#F8DDA5;
padding: 50px;
text-align: center;
font: 20pt bold,"Vollkorn";
color: #F60;
}

</style>
</head>
<div class="container">
 
    <div class="row">
      <div class="span7 offset2">
        <div id="dragZone">Drop files here to upload</div>
        <div id="result" class="mini-layout"></div>

      </div>
  </div>
</div>

</body>
</html>


tuDDUpload.js


    var DDUpload=function(options){
   
this.o=options;
var list=[];
      var cur;
var dragZone = document.getElementById(this.o.dragZone);
var result = document.getElementById(this.o.resultArea);
var self=this;
   
this.init=function(){
if (window.File &&
window.FileReader &&
window.FileList &&
window.Blob)
{
 
  dragZone.addEventListener('dragover', this.drgFile, false);
  dragZone.addEventListener('drop', this.drpFile, false);
}
else
{
alert("Your browser doesnot support");
}
};
     
 this.drgFile=function(e) {
   e.stopPropagation();
   e.preventDefault();
   e.dataTransfer.dropEffect = 'move';
 };
     
this.drpFile=function(e) {
    e.stopPropagation();
    e.preventDefault();
    self.preview(e);
  };
     
  this.preview=function(e){
  var files = e.dataTransfer.files;
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
    list.push(files[i]);
      output.push('<div class="mini-layout"><p><b>Filename:</b>', escape(f.name), '</p>',
                  '<p><b>Filetype:</b>',f.type,'</P>',
                  '<p><b>Size:</b>',(Math.round(f.size * 100 / 1024) / 100).toString(),'KB</P>',
                  '<p><div class="progress progress-striped active"><div class="bar" id="pb',i,'" ></div></div></p>',
                  '</div>');
    }
    document.getElementById('result').innerHTML =  output.join('');
    self.uploadinit();
  };
   
  this.uploadinit=function(){
  for (var i=0;i<list.length;i++) {
  self.upload(list[i],i);
  }
  };
     
  this.upload=function(ufile,i){
  var xhr = new XMLHttpRequest();
  var fd=new FormData();
  fd.append('file',ufile);
        xhr.upload.addEventListener("progress",function(e){self.uploadProgress(e,i)}, false);
            xhr.addEventListener("load", function(e){self.uploadFinish(e,i)}, false);
        xhr.open("POST", self.o.uploadUrl);
        xhr.send(fd);
  };
     
  this.uploadProgress=function(e,i){
  var percent = Math.round(e.loaded * 100 / e.total);

  document.getElementById('pb'+i).style.width=percent.toString()+"%";
  };
     
        this.uploadFinish=function(e,i){
            document.getElementById('pb'+i).style.width="100%";
        };

};

function initDDUpload(options){
 
var dup=new DDUpload(options);
 
   dup.init();
}

upload.php:

<?php
if (isset($_FILES['file'])) {
if(move_uploaded_file($_FILES['file']['tmp_name'], "uploads/".$_FILES['file']['name'])){
echo "success";
}
else
{
echo "fail";

}
}
exit;


Download: