Home / jQuery / jQuery drag and drop in modern browsers

jQuery drag and drop in modern browsers

One cool jQuery feature that saves lot of our time is the drag and drop files allowed in modern browsers. Simply drag and drop the file into a specific portion of the web page and you are done with uploading the file. Filereader.js is a sophisticated JS Library which handles the file types defined by user.

With jQuery it is as easy as you think. Lets get started with the mark up first.

Simple huh? Yes, you just need to define the id attribute in the jQuery where the images need to be appended.

Note: In this tutorial we will only be working on uploading images. You can customize the file types in the filereader.js

The CSS:

No we have set up the portion of the web page which will capture the image dropped in it and display the same. Let us add life to it.

The jQuery:

In the following code we will simply assign the DIV id=’handle’ to a variable and append the dropped images to it. Also we define the maxHeight and maxWidth of the images to be shown after capture. Finally set the image’s source attribute and define the hyperlink.

You are ready to test this module. You can also manipulate this module using PHP and upload images to a specific folder. For this you simply need to put the div inside a form and use the PHP file upload method. Run this demo in your localhost else this won’t work.

Download   Preview

About Ashik

I am a Full Stack Developer and love to work on APIs and Apps. Hardcore lover of Ionic and Laravel <3

Check Also

Private chatroom using socket.io, NodeJS and MySQL

As I promised to write a tutorial on Private chatroom with MySQL DB in the …

Do you wan't to get notified?

I will not spam your inbox. I will only send email whenever I publish a new article or to share information about technology

You have Successfully Subscribed!