Uploading Files, Using Ajax

As you may know it is impossible to upload files to the server using XHR! And the easiest way to upload them in an AJAX way is to use Iframes.
But be aware that uploading files through the XMLHttpRequests is NOT impossible, although it has some security issues.

So we will see how to develop a simple Ajax based upload using Iframe. The upload process by itself doesn't have anything complicated. You can do it in a synchronous style using any kind of server-side technology such as PHP, JSP, ASP or...
It will happen in a document which is displaying on the page using an Iframe so from the whole document point of view it will upload the file as an asynchronous request. But the thing is so important here is the JavaScript integration which is required between the main document and the uploading document (the document inside the Iframe) for showing some progress or loading animations.

In this tutorial I use PHP as server-side language and prototype.js as Ajax/JavaScript framwork.
You can download this script here, or do it yourself step by step:

1. index.html
Create a new file called index.html and write the following code in the body:

<h2>Upload file</h2>
<iframe frameborder=0 src="upload.php"></iframe>
<div id="board"></div>
<div id="images"></div>

The first DIV with ID="board" is for some messages which will be received before/after the upload process from the uploading document (the document inside th IFrame).
And the second one is for displaying uploaded photos. (If the uploaded files are photos!)


2. upload.php
Create another file called upload.php and write the following code inside it:

<?php

?>
<script type="text/javascript" src="js/prototype.js"></script>

<script type="text/javascript">

<!--
var par = parent.content.document;
var board = par.getElementById("board");
var images = par.getElementById("images");

function removeChildrenOf(s) {
while (s.hasChildNodes())
s.removeChild(s.childNodes[0]);
}

function message(msg, color) {
var message = par.createTextNode(msg);
board.setAttribute("style", "color: " + color);
board.appendChild(message);
}

function upload() {
var loader = par.createElement("img");
loader.setAttribute("src", "img/progress.gif");
removeChildrenOf(board);
board.appendChild(loader);
document.forms['photoform'].submit();
}

function addPhoto(source) {
var img = par.createElement("img");
img.setAttribute("src", "img/" + source);
images.appendChild(img);
}

<?php
if(isset($_FILES['file'])) {
sleep(1);
echo "removeChildrenOf(board);";
$ext = substr($_FILES['file']['name'], strrpos($_FILES['file']['name'], '.') + 1);

if((strtoupper($ext) == "JPG" || strtoupper($ext) == "GIF") || (strtoupper($ext) == "PNG" || strtoupper($ext) == "BMP")) {
copy($_FILES['file']['tmp_name'],'img/'.$_FILES['file']['name']);
echo "message('The photo was uploaded successfully.', '#22AA44'); ";
echo "addPhoto('".$_FILES['file']['name']."');";
} else {
echo "message('Invalid format! The valid formats are: JPG, GIF, PNG and BMP.', '#ff4444'); ";
}
}
?>

//-->
</script>

<form action="" method="post" id="photoform" enctype="multipart/form-data">
<input type="file" name="file" onchange="upload()"/>
</form>

3. The other needed files
Don't forget to create a new folder called js and copy the prototype.js file there.
And create another folder called img and copy a GIF animation called progress.gif there.

Enjoy uploading photos asynchronously!