File Upload Drag and Drop Tutorial HTML5 JavaScript PHP
In this programming exercise you can gain insight into building file upload applications with popular Drag and Drap features like YouTube, Facebook and other highly successful websites offer along with the regular file upload mechanisms. It is very easy to do with the new HTML5 Drag and Drop features. It is all simple JavaScript and PHP code and you do not need to use a 3rd party framework or any bulky libraries.
example.html<style>
#drop_zone {
background-color: #EEE;
border: #999 5px dashed;
width: 290px;
height: 200px;
padding: 8px;
font-size: 18px;
}
</style>
<script>
function drag_drop(event) {
event.preventDefault();
alert(event.dataTransfer.files[0]);
alert(event.dataTransfer.files[0].name);
alert(event.dataTransfer.files[0].size+" bytes");
/* This is where to begin uploading the file with Ajax and upload progress bar to PHP script */
/* https://www.developphp.com/video/JavaScript/File-Upload-Progress-Bar-Meter-Tutorial-Ajax-PHP */
}
</script>
<h1>File Upload Drop Zone</h1>
<div id="drop_zone" ondrop="drag_drop(event)" ondragover="return false"></div>