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

 

Like this post? Share it!

digg 48 Tutorial: Easiest way to create a Asynchronous upload file function
(ajax upload) reddit 48 Tutorial: Easiest way to create a Asynchronous upload file function
(ajax upload) stumbleupon 48 Tutorial: Easiest way to create a Asynchronous upload file function
(ajax upload) delicious 48 Tutorial: Easiest way to create a Asynchronous upload file function
(ajax upload) furl 48 Tutorial: Easiest way to create a Asynchronous upload file function
(ajax upload) technorati 48 Tutorial: Easiest way to create a Asynchronous upload file function
(ajax upload) google 48 Tutorial: Easiest way to create a Asynchronous upload file function
(ajax upload) myspace 48 Tutorial: Easiest way to create a Asynchronous upload file function
(ajax upload) facebook 48 Tutorial: Easiest way to create a Asynchronous upload file function
(ajax upload) twitter 48 Tutorial: Easiest way to create a Asynchronous upload file function
(ajax upload)
share save 171 16 Tutorial: Easiest way to create a Asynchronous upload file function
(ajax upload)

No related posts.

About Clay

I am Clay who is the main writer for this website. I own a small web hosting company in Malaysia and i'm available to be hired as individual contractor on elance or odesk. You can find me on twitter.
This entry was posted in How-to, JavaScript and tagged . Bookmark the permalink.

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

  1. Pingback: News Tutorial: Easiest way to create a Asynchronous upload file … | Web 2.0 Designer

  2. Pingback: WordPress Plugin: Google AJAX Libraries | JAVA窝

  3. dhani says:

    hai.. nice to met you, i like you tutorial..nice job, keep post more ajax tips and trick..i always follow you article…:)

  4. vrush says:

    it was really nice tutorial,i wanted to know more about it,i wanna set headers within upload.php but coz of iframe the redirected page is displayed in iframe,plz guide me urgently

  5. Clay says:

    Simple, just use JavaScript to retrieve all output value on the iframe and placed them into the real page. Unless you are talking about the header that you send to the browser and not the display. That will be a different story :)