FULL STACK   ·   UI   ·   UX   ·   GRAPHICS   ·   DEVELOPER   ·   INSTRUCTOR

Adam Khoury

Donate funds to show love and support

Click the button below to donate funds securely online. You can use your PayPal account or a credit card.

Your donations help free up my time to produce more content and assist in covering server costs. It's also a great way to say thanks for the content!

Application Configuration

Adam will be adding options here soon.

File Upload Drag and Drop Tutorial HTML5 JavaScript PHP

Published :
Author :
Adam Khoury

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>