Ajax Upload
<?php
if($_SERVER['REQUEST_METHOD']=='POST') {
  
print_r($_POST); print_r($_FILES); exit;
?>
<html><head>
<script type="text/javascript" src="/yui/yahoo.js"></script>
<script type="text/javascript" src="/yui/connection.js"></script>
<script type="text/javascript">
var fN = function callBack(o) { 
 var result = document.getElementById('result');
 result.innerHTML='<pre>'+o.responseText+'</pre>';
}
var callback = { success:fN, upload:fN }
function postForm(target,formName,up) {
  YAHOO.util.Connect.setForm(formName,up);
  YAHOO.util.Connect.asyncRequest('POST',target,callback);
}
</script>
</head>
<body>
 <form enctype="multipart/form-data" id="upload_form" action="" 
  onsubmit="postForm('/up.php','upload_form',1); return false;" 
  method="POST">
  <input type="hidden" name="APC_UPLOAD_PROGRESS" id="progress_key"
         value="<?php echo uniqid()?>"/>
  <input type="file" name="file1"/><br/>
  <input type="file" name="file2"/><br/>
  <input type="text" name="desc"/><br/>
  <input type="submit" value="Upload!"/>
 </form>
 <div id="result"></div>
</body>
</html>
Output



Ok, so we can upload via a backend request, but how do we check the status?

More backend requests of course!

Server-side Piece
<?php
if($_SERVER['REQUEST_METHOD']=='POST') {
  
$status apc_fetch('upload_'.$_POST['APC_UPLOAD_PROGRESS']);
  
$status['msg'] = 'blah';
  echo 
json_encode($status);
  exit;
} else if(isset(
$_GET['progress_key'])) {
  
$status apc_fetch('upload_'.$_GET['progress_key']);
  echo 
json_encode($status);
}
?>
Client-side
<script>
var fP = function callBack(o) {
 var resp = eval('(' + o.responseText + ')');
 if(!resp['done']) { 
  if(resp['total']) {
   var pct = parseInt(100*(resp['current']/resp['total']));
   document.getElementById('pbar').style.width = ''+pct+'%';
   document.getElementById('ppct').innerHTML = " "+pct+"%";
   document.getElementById('ptxt').innerHTML = resp['current']+" of "+resp['total']+" bytes";
  }
  setTimeout("update_progress()",500);
 } else if(resp['cancel_upload']) {
  txt="Cancelled after "+resp['current']+" bytes!"; 
  document.getElementById('ptxt').innerHTML = txt;
  setTimeout("progress_win.hide();window.location.reload(true);",2000);
 }
}

var pcallback = { success:fP }

function update_progress() {
 progress_key = document.getElementById('progress_key').value;
 YAHOO.util.Connect.asyncRequest('GET','up.php?progress_key='+progress_key, pcallback);
}

var progress_win;

function postForm(target,formName) {
 YAHOO.util.Connect.setForm(formName,true);
 YAHOO.util.Connect.asyncRequest('POST',target,callback);
 progress_win = new YAHOO.widget.Panel(...);
 update_progress();
}
</script>
 <div id="progress_win"> 
    <div class="hd"></div> 
    <div class="bd"></div> 
    <div class="ft"></div> 
 </div>
It looks something like this http://progphp.com/progress.php

Source at http://progphp.com/progress.phps