Tutorial: Easiest way to create a Asynchronous upload file function (ajax upload)

I am going to demo the simplest and easiest way of creating a asynchronous upload file function with JavaScript and PHP.  It is really easy but i take a VERY long time figuring out the method since all the goggling tutorial makes this look complicated and long. The objective is to keep thing simple, VERY SIMPLE.

Concept

Let's face the fact that Ajax cannot do a file upload asynchronously. But let's not go into argument that it can or cannot be done. The method used in this tutorial will be iframe method which is really very easy (slap myself) but i take like few hours to understand what are these people writing with so many unrelated codes. Basically we use a iframe to upload the file instead of the main window to upload it. The sideback of this method is that we cannot monitor the progress of the upload which is why Ajax come into handle in this case but i will not go into detail with the progression monitor of the upload.

Requirement

1. HTML file - for display purposes
2. PHP file - for the handling of the upload file
3. JavaScript - for assisting the whole process
4. READ

HTML

The HTML part is really very simple as shown below,

<form id="my_form" name="form" action="upload.php" method="POST" enctype="multipart/form-data" >

<div id="main">
<input name="my_files" id="my_file" size="27" type="file" />
<input type="button" name="action" value="Upload" onclick="redirect()"/>
<iframe id='my_iframe' name='my_iframe' src="">
</iframe>
</div>

</form>

I just placed the main code required, the other files can be view overall from the demo attached below. I believe everyone will know what is the above code trying to accomplished. It basically create a iframe, upload box and a button. These 3 item will be wrap around the form so that it can be uploaded by either iframe or uploadbox upon clicked of the button.

P.S: The iframe is not hidden yet, so you guys can see that it has been uploaded over there.

JavaScript

Think asynchronous upload is difficult in the JavaScript part? Think again.

function redirect()
{
document.getElementById('my_form').target = 'my_iframe'; //'my_iframe' is the name of the iframe
document.getElementById('my_form').submit();
}

This is the only function required function you need for Asynchronous upload or ajax upload whatever you call it. What it does is to change the target upload responsible to the iframe instead of the main window frame. Thus, the iframe refresh instead of the main display screen upon the click of the button. ( why do people have to complex stuff, sigh..)

PHP

I believe this part is just about handling the data, so here goes,

$uploaddir = '/images/';
$uploadfile = $uploaddir . basename($_FILES['my_files']['name']);

if (move_uploaded_file($_FILES['my_files']['my_name'], $uploadfile)) {
echo "success";
} else {
echo "error";
}

The above doesn't place constraint on the type of files that is allowed to be placed into the server. You should always add that to avoid unnecessary problem to your application. The above code will move the uploaded file to the upload folder as directed.

Demo

The files did not move the files to any location it will just print out and delete away once it has output successful to the iframe. The demo files can be downloaded from here. You must have to setup a web server to test on it.  You can view the demo here.

P.S: If you are looking for upload completion alert you can find the post at How to detemine an asynchronous upload completion with JavaScript and PHP