Hi friends in  this tutorial, we will go through the process of uploading image and files as the front uploader and using PHP as the server side language to store files on the server. It will be easy to drag and drop multiple files using HTML5 and upload it using php. We are not using any third party plugins. The code should be easily understand by every developers.

At the end of the tutorial you should be able to use my script as your need and free to download them.

HTML

	

		
Drop files here
		
or
		

		
		
Wait there! You must ENABLE Javascript to have this works!
	
	

Jquery

$(document).ready(function() {
	
	if ((window.FormData === undefined)||(window.FormData =="")) {
    $('#err').html("HTML5 Not Supported, Please Use Regular Uploading Method");
    }
    $("#droparea").on('dragenter', function(e) {
        e.preventDefault();
        $(this).css('background', 'rgb(230, 236, 168)');
    });

    $("#droparea").on('dragover', function(e) {
        e.preventDefault();
    });

    $("#droparea").on('drop', function(e) {
        $(this).css('background', 'rgb(246, 249, 209)');
        e.preventDefault();
        var image = e.originalEvent.dataTransfer.files;
        createFormData(image);
    });
});

Previously mentioned Javascript at first calls jquery library. After that it checks whether your browser support HTML5 or not using window.FormData. If window.FormData is not defined then browser doesn’t support HTML5 file upload and the code will throw an error alerting the user to upload file using regular method. After window.FormData is checked we are using drag and drop elements of Jquery.

Once your files are get drop or selected use ajax to post the details to the upload.php.

 $.ajax({
        url: "upload.php",
        type: "POST",
        data: formData,
        contentType: false,
        cache: false,
        processData: false,
        success: function(data) {
            $('.files').append(data);
},
});

While uploading to the server the loading of the file data can be calculated and shown to you using bootstrap progress bar. Once file reached server, the progress bar indicates that "upload complete..".

function progress(e) {
    if (e.lengthComputable) {
        var percentComplete = (e.loaded || e.position) * 100 / e.total;
        //Do something with upload progress
        console.log(percentComplete);
        $('.progress-bar').width(percentComplete + '%').html(percentComplete + '%');
       
    }
}

function loadfunction(e) {
    $('.progress-bar').addClass('progress-bar-success').html('upload completed....');
    setTimeout(function() {
        $(".progress-bar").hide();
    }, 5000);
    $(".progress-bar").show();
}

By Thirumani Raj posted on - 14th Feb 2016

Live Demo Download Script