Ajax File Uploading with progressbar

Ajax file uploading with progress bar can be particularly useful if your site needs to upload large files…since no one really wants to wait few minutes wondering why the page is taking so long to load, or even they may feel their connection died…
It is not only cool but, pretty useful to a user who is expecting a large upload to complete…

Ajax dosent really support file uploading, In this tutorial i will explaining how to achieve the ajax effect for file uploads.
Ajax Effect can be achived using iframe method to upload our files…
The form would be submitted in a hidden iframe, so our page dosent reload but our uploading will be going on..
Here some sample code, for easy understanding

 

<iframe name=”upload_frame” style=”height:0px; width:0px;border:0;”></iframe> 
<!-- notice the iframe is hidden with 0 dimensions --> 
<form action=”fileupload.php” target=”upload_frame” onsubmit=”submitfile()” name=”upload_form”> 
<!-- notice the target is name of the iframe --> 
<input type=”file” name=”file” id=”uFile”/> 
<input type=”submit” value=”Upload” id=”uSubmit” /> 
</form> 
<script language=”javascript”> function submitfile() { 
// we would have to disable the submit button, so as not to interrupt 
// the download 
document.getElementById(‘uFile’).disabled=”true”; 
document.getElementById(‘uSubmit’).disabled=”true”; 
// now since the file is continuously being written to the disc at 
// the server, get the upload size divided by the actual size 
passsed doAjaxRequest( “showprogress.php?file=” + document.getElementById(‘ufile’).value ); return true; }

function doAjaxRequest( requestURL ) { 
// ... 
// your ajax code as usual 
// to retrieve content every few seconds 
// ... } 
</script>

Once the form is submitted an Ajax request would be sent to a script at server every few seconds to fetch the size of the file being uploaded.
While the file is being uploaded through the iFrame, another script say showprogress.php?file=filename.zip where filename.zip is the name of the file being uploaded

The script showprogress.php will retrieve the total filesize of the file being uploaded…( this data is passed to the server before the actual upload begins ), which would be stored on file at the server until the upload is over.

The upload data is continuously written to a file in the temporary upload folder.
Our script showprogress.php will retrieve the complete file size and the current uploaded size, calculates the percentage complete and it is sent back to the browser via ajax, to display the progress..

Once the progress is complete the upload buttons are removed by javascript and a success message is shown…

And for obvious reasons i cant show the demo…, if possible i will put a demo on some free server some time later….