File Upload with Progress bar by Raw AJAX & php

Hey Guyz in the tutorial i am going to teach you how to create a file upload system with progress bar with raw ajax. This is very useful for the hosting website because it give a great feedback to the user how much their file has been uploaded. This type to project can be created easily with a code library like jQuery but its greate to create it via raw ajax it give a greate understanding that what is going on

live Demo Download Watch Video

html

html markup is super easy in this we have a form a progressbar and a empty status div

<form action="upload_back.php" method="post" enctype="multipart/form-data" id="form">
  <input type="file" name="file1" id="file1">
  <input type="submit" name="submit" id="submit" value="upload"> 
 </form>
 <br>
 <div style="width:400px;">
  <div id="progressbar">
   <div id="progress" style="width:0px;"></div>
  </div>
 </div>
 <div id="status"></div>

css

in css we are designing the progress bar fro more details view my previous post on Css3 Progress Bar

<style type="text/css">
#progressbar{
 width: 100%;
 background: #eee;
 padding: 3px;
 border-radius: 3px;
 box-shadow: inset 0px 1px 3px rgba(0,0,0,0.2);
 }
#progress{
 height: 20px;
 background: cornflowerblue;
 display: block;
 border-radius: 3px;
 -webkit-transition: width 0.8s ease;
 -moz-transition: width 0.8s ease;
 transition: width 0.8s ease;
}
</style>

JavaScript

in javascript we are sending the uploded data to the upload_back.php page and by diving the kb send and total kb we get the percentage of how much the file is uploaded

<script type="text/javascript">
 var ajax = new XMLHttpRequest();
 function $(id){
  return document.getElementById(id);
 }
 function upload(e){
  e.preventDefault();
  var file = $("file1").files[0];
  var formdata = new FormData();
  formdata.append('file1', file);

  ajax.upload.addEventListener('progress', progressHandler, false);
  ajax.addEventListener('load', completeHandler, false);
  ajax.addEventListener('abort', abortHandler, false);
  ajax.addEventListener('error', errorHandler, false);
  ajax.open('POST', 'upload_back.php');
  ajax.send(formdata);
 }

 function progressHandler(e){
  var percent = (e.loaded / e.total) * 100;
  percent = Math.round(percent);
  $('progress').style.width = Math.round(percent)+'%';
  $('status').innerHTML = percent + '% uploaded plzz wait.....';
 }
  function completeHandler(){
   $('status').innerHTML = ajax.responseText;
   $('progress').style.width = '0%';
  }

  function abortHandler(){
   alert('file upload aborted');
  }

  function errorHandler(){
   alert('file upload has an error');
  }
         //when form is submited
 $('form').addEventListener('submit', upload, false);

</script>

upload_back.php

in php file first we are getting the extension of the image and if iuts valid then we upload the file and show the link

<?php
 function getext($img){
  $name = strtolower($img);
  $data = explode(".", $name);
  $ext = count($data) -1;
  return $data[$ext];
 }
 if(isset($_FILES)){
  $allowed = array('jpg','png','gif');
  $ext = getext($_FILES['file1']['name']);
  $size = $_FILES['file1']['size'];
  if(in_array($ext, $allowed)){
   if($size < 2097152){
    $name = $_FILES['file1']['name'];
    if(move_uploaded_file($_FILES['file1']['tmp_name'], './upload/'.$name)){
     echo '<a href="./upload/'.$name.'">'.$name.'</a>';
    }else{
     echo "file upload has an error";
    }
   }else{
    echo "File size more than <strong>2MB<strong>";
   }
  }else{
   echo "file type not allowed";
  }
 }else{
  echo "not";
 }
?>