File Upload Progress Bar Using jQuery And PHP.

Friday, Apr 7, 2017

Tags:- jQuery PHP HTML CSS


Progress Bar is used to display the progress of file upload process.Its very helpful and widely used in file upload process just to give user about progress of file upload.In this tutorial we will create file upload progress bar using jquery and php.You may also like Drag And Drop Image Upload Using jQuery


See Demo
File Upload Progress Bar


To Create File Upload Progress Bar it takes only four steps:-

  1. Make a HTML file and define markup for file upload
  2. Make a JavaScript file and define script for Progress Bar
  3. Make a PHP file to upload the image
  4. Make a CSS file and define styling for Progress Bar


Step 1.Make a HTML file and define markup for file upload

We make a HTML file and save it with a name fileupload.html

<html>
<head>
  <link rel="stylesheet" type="text/css" href="progress_style.css">
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="jquery.form.js"></script>
  <script type="text/javascript" src="upload_progress.js"></script>
</head>
<body>
<form action="upload_file.php"id="myForm" name="frmupload" method="post" enctype="multipart/form-data">
  <input type="file" id="upload_file" name="upload_file" />
  <input type="submit" name='submit_image' value="Submit Comment" onclick='upload_image();'/>
</form>
<div class='progress' id="progress_div">
<div class='bar' id='bar1'></div>
<div class='percent' id='percent1'>0%</div>
</div>
<div id='output_image'>
</body>
</html>

In this step we make a form to upload file and attach all the necessary files but before you proceed further you have to download jQuery and jQuery Form Plugin



Step 2.Make a JavaScript file and define script for Progress Bar

We make a JavaScript file and save it with name upload_progress.js

function upload_image() 
{
  var bar = $('#bar');
  var percent = $('#percent');
  $('#myForm').ajaxForm({
    beforeSubmit: function() {
      document.getElementById("progress_div").style.display="block";
      var percentVal = '0%';
      bar.width(percentVal)
      percent.html(percentVal);
    },

    uploadProgress: function(event, position, total, percentComplete) {
      var percentVal = percentComplete + '%';
      bar.width(percentVal)
      percent.html(percentVal);
    },
    
	success: function() {
      var percentVal = '100%';
      bar.width(percentVal)
      percent.html(percentVal);
    },

    complete: function(xhr) {
      if(xhr.responseText)
      {
        document.getElementById("output_image").innerHTML=xhr.responseText;
      }
    }
  }); 
}

In this step we use ajaxForm to upload and show the progress bar.jQuery Form Plugin has predefined functions to upload and display the progress bar.In first function we initialise the progress bar width and % and set the styling.In second function it increase the % and width of the bar as file uploads slowly slowly.In third function if file upload successfully then set the % to 100 and increase the bar width.In fourth function if the whole file upload process completes with no error then it displays the file.For more information about jQuery form functions.



Step 3.Make a PHP file to upload the image

We make a PHP file and save it with name upload_file.php

if(isset($_POST['submit_image']))
{
  $uploadfile=$_FILES["upload_file"]["tmp_name"];
  $folder="images/";
  move_uploaded_file($_FILES["upload_file"]["tmp_name"], $folder.$_FILES["upload_file"]["name"]);
  echo '<img src="'.$folder."".$_FILES["upload_file"]["name"].'">';
  exit();
}

In this step we get and upload file to folder and send the file to javascript upload file for display.In this step we except only images to upload you can customise further as per your need.You can also view How to Upload Images to server or database



Step 4.Make a CSS file and define styling for progress bar

We make a CSS file and save it with name progress_style.css.

body
{ 
  padding: 30px 
}
form 
{ 
  display: block; 
  margin: 20px auto; 
  background: #eee; 
  border-radius: 10px; 
  padding: 15px 
}
.progress 
{
  display:none; 
  position:relative; 
  width:400px; 
  border: 1px solid #ddd; 
  padding: 1px; 
  border-radius: 3px; 
}
.bar 
{ 
  background-color: #B4F5B4; 
  width:0%; 
  height:20px; 
  border-radius: 3px; 
}
.percent 
{ 
  position:absolute; 
  display:inline-block; 
  top:3px; 
  left:48%; 
}


You can view our get file size and extension before uploading using jQuery tutorial to validate files before uploading.Thats all, this is how to Create File Upload Progress Bar Using jQuery and PHP. You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

Subscribe Our Newsletter And Get Tutorials
And Offers Via Email

Subscribe Our Newsletter And Get Tutorials And Offers Via Email

About Me


Hello, My Name is Mudit Jain. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of TalkersCode. I started this blog in february 2015 to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers.