The easy way to create drag and drop file upload using jQuery and PHP, create drag and drop file upload easily, tutorial & example.

How To Create Drag And Drop File Upload

Using jQuery and PHP, we will create drag and drop file upload, we need normal PHP file upload script and jQuery Ajax and simple CSS code only.

Create Drag And Drop File Upload

We need PHP file upload script, use this script.

Now we need HTML Form:

 <form id="my-form" method="POST" action="uploader.php" enctype="multipart/form-data">
     <div id="file-wrap">
         <p>Drag and drop file here</p>
         <input id="my-file" type="file" name="your-name" draggable="true">
     </div>
 </form>

<div id="result"></div> <!-- the result will be inside this element -->

CSS Code:

/*
    Style By Qassim Hassan, wp-time.com
*/

#my-file{
    position:absolute;
    left:0;
    top:0;
    background:red;
    width:100%;
    height:100%;
    opacity:0;
}

#file-wrap{
    position:relative;
    width:480px;
    padding: 30px;
    display: block;
    border: 2px dotted #ccc;
    margin: 0 auto;
    text-align: center;
    box-sizing:border-box;
    border-radius: 5px;
}

Now include jQuery and include new JavaScript file “ajax-upload.js” before </head> tag:

<script type="text/javascript" src="js/jquery-1.12.1.min.js"></script>
<script type="text/javascript" src="js/ajax-upload.js"></script>

Now create new JavaScript file “ajax-upload.js” and enter this code inside it:

/*
    Ajax Upload By Qassim Hassan, wp-time.com
*/

$( function() {

    $("#my-form").on('change', function (e) { // if change form value

        $("#result").html('<img src="http://qass.im/drag-and-drop-upload-on-change/ajax-loader.GIF">'); // display image loader in #result element

        var eventType = $(this).attr("method"); // get method type for #my-form

        var eventLink = $(this).attr("action"); // get action link for #my-form

        $.ajax({

            type: eventType,

            url: eventLink,

            data: new FormData( this ), // IMPORTANT!

            cache: false,

            contentType: false,

            processData: false,

            success: function(getResult) {

                $('#my-form')[0].reset(); // reset form

                $("#result").html(getResult); // display the result in #result element

            }

        });

        e.preventDefault();

    });

});

Done.

Submit Event

If you want to use “Submit” button in upload form, add submit button inside form:

<input type="submit" value="upload">

And in “ajax-upload.js” file, enter this code:

/*
    Ajax Upload By Qassim Hassan, wp-time.com
*/

$( function() {

    $("#my-file").on('change', function (e) { // if file input value
        $("#file-wrap p").html('Now click on Upload button'); // change wrap message
    });

    $("#my-form").on('submit', function (e) { // if submit form

        $("#result").html('<img src="http://qass.im/drag-and-drop-upload-on-submit/ajax-loader.GIF">'); // display image loader in #result element

        var eventType = $(this).attr("method"); // get method type for #my-form

        var eventLink = $(this).attr("action"); // get action link for #my-form

        $.ajax({

            type: eventType,

            url: eventLink,

            data: new FormData( this ), // IMPORTANT!

            cache: false,

            contentType: false,

            processData: false,

            success: function(getResult) {

                $('#my-form')[0].reset(); // reset form

                $("#result").html(getResult); // display the result in #result element

                $("#file-wrap p").html('Drag and drop file here'); // change wrap message
 
            }

        });

        e.preventDefault();

    });

});

Now if user click on “Submit” button, will be upload file using Ajax.

Live Demo

Drag and drop file upload using On Change Event.

Drag and drop file upload using On Submit Event.

Download

Download drag and drop upload script with all demo example.