Thursday, 2 August 2018

Ajax File Upload with Progress Bar using PHP JQuery

           , , , , , , , , , , , ,      8 comments   
Upload of Image or File must always required a Progress bar. This type of website feature which has been ignored by most of the web developers. This type of feature is an one part of web application functionality. If we have not use progress bar in image or file upload using Ajax then user cannot seen what is uploading which we have done in back end and he cannot get idea about file or image has been uploaded or not.

So, if user has send request to server for upload file or image operation, then it is best practice to see them about the progress of their uploading. Display of uploading process in progress bar, it is a good sign of our website UI/UX. For improving our web application UI/UX then we have to display upload process in progress bar and user can get idea about upload operation in process or has been completed. We have already publish how to upload Image using Ajax with PHP, but there is only we have simply upload image to folder without displaying of upload process in progress bar. But in this post we have learn how can we create animated progress bar using Jquery with Bootstrap while uploading of an image via Ajax.

For Select Image or File from our local computer here we have use A file input html tag and after this we have send this file to PHP using Ajax. Once it has send file upload request to PHP, then in Ajax script will execute Jquery animation using animate() method and display file uploading process in progress bar which has been make by using Bootstrap. Bootstrap progress bar will display process of uploading using JQuery animation. Here we have also use Jquery Form plugin has been used for handle upload Image via Ajax with progress bar.










Image / File Upload HTML Form


On index.php page we have make one HTML form with Input file tag. So user can select file from their local computer and send file data by sending form using Ajax. For send form data in this page we have already included Jquery Form plugin at the starting of script. We have use HTML 5 file accept attribute for select only .jpg and .png file. 


<!DOCTYPE html>
 <html>
 <head>
  <title></title>
  <link href="css/bootstrap.min.css" rel="stylesheet" />
  <script src="js/jquery-1.10.2.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/jquery.form.js"></script>
 </head>
 <body>
  <div class="container">
   <br />
   <h3 align="center">Ajax File Upload Progress Bar using PHP JQuery</h3>
   <br />
   <div class="panel panel-default">
    <div class="panel-heading"><b>Ajax File Upload Progress Bar using PHP JQuery</b></div>
    <div class="panel-body">
     <form id="uploadImage" action="upload.php" method="post">
      <div class="form-group">
       <label>File Upload</label>
       <input type="file" name="uploadFile" id="uploadFile" accept=".jpg, .png" />
      </div>
      <div class="form-group">
       <input type="submit" id="uploadSubmit" value="Upload" class="btn btn-info" />
      </div>
      <div class="progress">
       <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
      <div id="targetLayer" style="display:none;"></div>
     </form>
     <div id="loader-icon" style="display:none;"><img src="loader.gif" /></div>
    </div>
   </div>
  </div>
 </body>
</html>

JQuery Progress bar with Ajax Form Submit


In this example we have use Jquery Form library for submit form data using Ajax with JQuery Bootstrap animated progress bar. The ajaxSubmit() function has been used for submit image file to the PHP script via Ajax. Image Upload progress has been display in progress bar using uploadProgress callback function and by using Jquery animate() method we have use for display upload progress in progress bar.


<script>
$(document).ready(function(){
 $('#uploadImage').submit(function(event){
  if($('#uploadFile').val())
  {
   event.preventDefault();
   $('#loader-icon').show();
   $('#targetLayer').hide();
   $(this).ajaxSubmit({
    target: '#targetLayer',
    beforeSubmit:function(){
     $('.progress-bar').width('50%');
    },
    uploadProgress: function(event, position, total, percentageComplete)
    {
     $('.progress-bar').animate({
      width: percentageComplete + '%'
     }, {
      duration: 1000
     });
    },
    success:function(){
     $('#loader-icon').hide();
     $('#targetLayer').show();
    },
    resetForm: true
   });
  }
  return false;
 });
});
</script>

PHP Code for File Upload


This is simple PHP file upload script for upload file in specified location folder. Here All file data has been stored into $_FILES superglobal variable of PHP. For upload file to specified upload folder we have use PHP move_uploaded_file() function.


<?php

//upload.php

if(!empty($_FILES))
{
 if(is_uploaded_file($_FILES['uploadFile']['tmp_name']))
 {
  sleep(1);
  $source_path = $_FILES['uploadFile']['tmp_name'];
  $target_path = 'upload/' . $_FILES['uploadFile']['name'];
  if(move_uploaded_file($source_path, $target_path))
  {
   echo '<img src="'.$target_path.'" class="img-thumbnail" width="300" height="250" />';
  }
 }
}

?>

If you have follow this source code then you can make Ajax Image upload with Progress bar in PHP script. If you want to download source code click on below link.





8 comments: