Example – Drag and Drop File Upload jQuery



In Drag and Drop File Upload jQuery example, I have explained how to implement drag and drop file upload using HTML5 and jQuery AJAX API.
Drag and drop is supported only in HTML5 browsers. Supported Browsers are: IE 10+ , Firefox ,Chrome , Safari, Opera.

Step 1). Add jQuery library to your HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

Step 2). Add a div tag to body which handles file uploads

<div id="dragandrophandler">Drag & Drop Files Here</div>

We can add some style to div using below CSS.

Step 3). Handle drag and drop events with jQuery

If the files are dropped outside the div, file is opened in the browser window. To avoid that we can prevent ‘drop’ event on document.

Step 4) Read the file contents using HTML5 FormData() when the files are dropped.

Step 5) Send FormData() to Server using jQuery AJAX API

Putting All together: Drag and Drop File Upload jQuery Example


Leave A Reply

Your email address will not be published.