mehrshaddarzi
9/29/2017 - 6:07 PM

// source http://jsbin.com/puteru/11

// source http://jsbin.com/puteru/11

index.html
content_copyfile_download
<!DOCTYPE html>
<html>
<body>
<style>
  #holder.hover { border: 10px dashed #0c0 !important; }
</style>
<form method="post" action="http://httpbin.org/post" enctype="multipart/form-data">
<input id="name"><br/>
<input id="type"><br/>
<input id="size"><br/>
<input id="modified"><br/><br/>
<div id="holder" style="width:200px; height:200px; border: 10px dashed #ccc" id="holder"></div>
</form>
<script>
var holder = document.getElementById('holder');
holder.ondragover = function () { this.className = 'hover'; return false; };
holder.ondragend = function () { this.className = ''; return false; };
holder.ondrop = function (e) {
  this.className = '';
  e.preventDefault();
  upload(e.dataTransfer.files);
};
///////////////////////////////
function upload(files) {
    document.getElementById('name').value = files[0].name;
    document.getElementById('size').value = files[0].size;
    document.getElementById('type').value = files[0].type;
	document.getElementById('modified').value = files[0].lastModifiedDate;
    var formData = new FormData();
    formData.append('img',files[0]);
	//post the form data yourself, but it's ready to go
}
</script>


</body>
</html>