Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

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> Related Tutorials Drag and Drop Application Development DnD Tutorial File Upload Progress Bar Meter Tutorial Ajax PHP

Nuts and Bolts

DataTransfer - JavaScript Object Functions - JavaScript Functions div - HTML element
thumb

JavaScript Videos

Drag and Drop Programming

Drag and Drop Application Development DnD TutorialFile Upload Drag and Drop Tutorial HTML5 JavaScript PHP