File upload progress bar with percentage using form jquery in PHP

Share Me
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Today now in this post i will show you File upload progress bar with percentage using form jquery in PHP. Sometimes we need to show the progress bar with rate on document transfer, in light of the fact that occasionally assuming we transfer enormous size of record, we ought to an excess of stand by without known wonderful time. So around then assuming we add progress bar with rate, it is more solace then other, that way client can perceive what amount of time it will require and what amount transfer.

In this model I going to give you File transfer progress bar with rate utilizing structure jquery model in php. in this model I use structure js that way we can transfer utilizing ajax and we don’t have to page revive. in this model you need to make just two record one index.php and other one uploadpro.php this is much simple.

index.php
<html lang="en">
<head>
    <title>File upload progress bar with percentage using form jquery example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
    <script src="http://malsup.github.com/jquery.form.js"></script> 
    <script> 
        $(document).ready(function() { 


         var progressbar     = $('.progress-bar');


            $(".upload-image").click(function(){
             $(".form-horizontal").ajaxForm(
 {
   target: '.preview',
   beforeSend: function() {
 $(".progress").css("display","block");
 progressbar.width('0%');
 progressbar.text('0%');
                    },
     uploadProgress: function (event, position, total, percentComplete) {
         progressbar.width(percentComplete + '%');
         progressbar.text(percentComplete + '%');
      },
 })
 .submit();
            });


        }); 
    </script>
</head>
<body>
 <nav class="navbar navbar-default">
 <div class="container-fluid text-center">
 <div class="navbar-header">
 <a class="navbar-brand" href="#">ItSolutionstuff.com</a>
 </div>
 </div>
 </nav>
 <div class="container text-center">
 <h2>PHP - File upload progress bar and percentage with jquery</h2>
 <div style="border: 1px solid #a1a1a1;text-align: center;width: 500px;padding:30px;margin:0px auto">
 <form action="uploadpro.php" enctype="multipart/form-data" class="form-horizontal" method="post">


 <div class="preview"></div>
  <div class="progress" style="display:none">
   <div class="progress-bar" role="progressbar" aria-valuenow="0"
   aria-valuemin="0" aria-valuemax="100" style="width:0%">
     0%
   </div>
 </div>


 <input type="file" name="image" class="form-control" />
 <button class="btn btn-primary upload-image">Upload Image</button>

 
 </form>
 </div>
 </div>
</body>
</html>

uploadpro.php

<?php
 define('DB_SERVER', 'localhost');
 define('DB_USERNAME', 'root');
 define('DB_PASSWORD', 'root');
 define('DB_DATABASE', 'learn');
 $db = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);

 if(isset($_POST) && !empty($_FILES['image']['name'])){
 $name = $_FILES['image']['name'];
 list($txt, $ext) = explode(".", $name);
 $image_name = time().".".$ext;
 $tmp = $_FILES['image']['tmp_name'];

 if(move_uploaded_file($tmp, 'upload/'.$image_name)){

 mysqli_query($db,"INSERT INTO items (title)
 VALUES ('".$image_name."')");

 echo "<img width='200px' src='upload/".$image_name."' class='preview'>";
 }else{
 echo "image uploading failed";
 }
 }
?>

Read Also: Generate Captcha code and Validation by using BotDetect package in laravel

Thanks for read. I hope it help you. For more you can follow us on facebook

About code chef

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by code chef →