File Upload Progress bar using PHP and Jquery

In this article i am going to shows how to upload file with progress bar.

I have used PHP,Jquery to upload a file.

Functionality Files:

1.Index.php
2.Upload.php

Live Demo Download Script

HTML Code

    <div style='width:900px;margin:auto'>
      <h1> File Upload Progress bar using PHP and Jquery </h1>
      <form action="upload.php" method="post" enctype="multipart/form-data">
        <input type="file" name="uploadedfile" required>
        <br>
        <input type="submit" name="Upload" id="upload" value="Upload File">
      </form>
      <div class="progress">
        <div class="bar"></div >
        <div class="percent">0%</div >
      </div>
      <div id="status"></div>
    </div>

Jquery Files

    <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>
 (function() {
 var bar = $('.bar');
 var percent = $('.percent');
 var status = $('#status');
 $('form').ajaxForm({
   beforeSend: function() {
     status.empty();
     var percentVal = '0%';
     bar.width(percentVal)
     percent.html(percentVal);
   },
   uploadProgress: function(event, position, total, percentComplete) {
     var percentVal = percentComplete + '%';
     bar.width(percentVal)
     percent.html(percentVal);
   },
   complete: function(xhr) {
     bar.width("100%");
     percent.html("100%");
     status.html(xhr.responseText);
   }
 }); 
 })();    
 </script>

PHP Code

      <?php
 if(isset($_POST['submit']))
 {
 $upload_dir = $_SERVER['DOCUMENT_ROOT'] . dirname($_SERVER['PHP_SELF']);
 $upload_url = '/';
      $temp_name = $_FILES['uploadedfile']['tmp_name'];
      $file_name = $_FILES['uploadedfile']['name'];
      $file_path = $upload_dir.$upload_url.$file_name;
      if(move_uploaded_file($temp_name, $file_path))
      {
           echo "File uploaded Success !";
      }
}
?>

Please share your comments and feedback.Thanks.!