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,

5 thoughts on “Tutorial: Easiest way to create a Asynchronous upload file function (ajax upload)

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

  2. 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

  3. 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 🙂

Comments are closed.