In this blog we are going to see how we can upload multiple files at once and stored in the server by the use of query, ajax, php and bootstrap progress bar. We have created an html form for selecting the files. The form contains the input tag as type='file'. By the use of the file tag the user can the browse the file any placed it on the browser. Clicking add more button multiple file input tag has been created dynamically. The main benefit of this is its allows to upload multiple file by clicking the upload all button without submitting multiple forms. We can also upload the file one by clicking the relevant upload button. Once file upload starts the bootstrap progress bar indicates the loading data which is useful for the user to identified how long the time will take to reach the server. At once file reached the server the uploaded image will be automatically reflects in the table data.

HTML

   

      

         
 Add More
         
	 Delete
         
 Upload All
         
 Cancel All
      
   


   

      

      

         

            

               	
            
            

               

                  

               
            
            

                Upload
                Cancel
            
         
      
      

      

   

JQUERY

$(document).ready(function() {
	var i=$('#table_auto tr').length; // Get the no.of rows in the table
	$(".addmore").on('click',function(){
	html = '';
	html += '';
	html +='';
	html +='
';
	html +='
';	
     html +='
';
	html +=' Upload Cancel
';
	html +='
';
    html +='';
	html +='';
    html +='';
	html += '';
	$('#table_auto').append(html); //Append the new row to the table
	i++;
	

});
$('.upload-all').click(function() {
    //submit all form
    $('form').submit();
});

$('.cancel-all').click(function() {
    //submit all form
    $('form .cancel').click();
});

$(document).on('submit', 'form', function(e) {
    e.preventDefault();

    $form = $(this);

    uploadImage($form);

});

function uploadImage($form) {
    $form.find('.progress-bar').removeClass('progress-bar-success')
        .removeClass('progress-bar-danger');

    var xhr = new window.XMLHttpRequest();
    $.ajax({
        url: "server.php",
        type: "POST",
        data: new FormData($form[0]),
        contentType: false,
        cache: false,
        processData: false,
        success: function(data) {
            $form.closest('tr').find('td:nth-child(3)').text(data.image);
            $form.closest('tr').find('td:nth-child(4)').html(data.destination);
            $form[0].reset();
        },
        error: function() {},
        xhr: function() {

            //Upload progress
            xhr.upload.addEventListener("progress", function(e) {
                if (e.lengthComputable) {
                    var percentComplete = (e.loaded || e.position) * 100 / e.total;
                    //Do something with upload progress
                    console.log(percentComplete);
                    $form.find('.progress-bar').width(percentComplete + '%').html(percentComplete + '%');
                }
            }, false);
            xhr.addEventListener('load', function(e) {
                $form.find('.progress-bar').addClass('progress-bar-success').html('upload completed....');
            });
            return xhr;
        }

    });


    $form.on('click', '.cancel', function() {
        xhr.abort();

        $form.find('.progress-bar')
            .addClass('progress-bar-danger')
            .removeClass('progress-bar-success')
            .html('upload aborted...');
    });

}
});

PHP

// Output JSON
function outputJSON($msg, $status = 'error',$image="",$destination=""){
    header('Content-Type: application/json');
    die(json_encode(array(
        'data' => $msg,
        'status' => $status,
		'image'=>$image,
		'destination'=>$destination
    )));
}
$image_formats = array("jpg", "png", "gif", "bmp","jpeg","PNG","JPG","JPEG","GIF","BMP"); 
// Check for errors
if($_FILES['image']['error'] > 0){
    outputJSON('An error ocurred when uploading.');
}

if(!getimagesize($_FILES['image']['tmp_name'])){
    outputJSON('Please ensure you are uploading an image.');
}


$ext= pathinfo($_FILES['image']['name'],PATHINFO_EXTENSION); // Get Image Extension
// Check filetype
if(!in_array($ext,$image_formats)){

    outputJSON('Unsupported filetype uploaded.');
}

// Check filesize
if($_FILES['image']['size'] > 500000){
    outputJSON('File uploaded exceeds maximum upload size.');
}

// Check if the file exists
if(file_exists('upload/' . $_FILES['image']['name'])){
    outputJSON('File with that name already exists.');
}

// Upload file
if(!move_uploaded_file($_FILES['image']['tmp_name'], 'upload/' . $_FILES['image']['name'])){
    outputJSON('Error uploading file - check destination is writeable.');
}


outputJSON('File uploaded successfully to "' . 'upload/' . $_FILES['image']['name'] . '".', 'success',$_FILES['image']['name'],$destination);

By Thirumani Raj posted on - 18th Feb 2016

Live Demo Download Script