<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>



<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>



<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>