Multiple form file uploader using Jquery Ajax PHP and Bootstrap Progressbar

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.




$(document).ready(function() {
	var i=$('#table_auto tr').length; // Get the no.of rows in the table
	html = '';
	html += '';
	html +='';
	html +='
'; html +='
'; html +='
'; html +='
'; 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...'); }); } });


// Output JSON
function outputJSON($msg, $status = 'error',$image="",$destination=""){
    header('Content-Type: application/json');
        'data' => $msg,
        'status' => $status,
$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.');

    outputJSON('Please ensure you are uploading an image.');

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

    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);

Thats all!

By posted on - 18th Feb 2016

Social Oauth Login

Personalized Map Navigation

Online Image Compression Tool

Image Compression


Recent Posts