PHP File Upload without Refresh (AJAX emulator)

I have created this tutorial as a mid-way between my Simple PHP Upload post and the Multiple Files with Progress Bar Upload post. This is designed to give all visitors of my site a chance to understand the more complex version.

Ok, we are building upon the material described within a previous post. The previous post is basically simple uploader and what I am going to explain here is how to up the coding so that the page does not need to refresh in order to upload the file.

All I did was rewrite the HTML to look more like:

<title>Upload Dat File!!</title>

<form action="upload.php" method="post" target="uploadFrame" enctype="multipart/form-data">

<input type="file" name="userfile" size="30"/>
<input type="submit" value=" Upload ">


<iframe name="uploadFrame" style="display:none;"></iframe>

So this HTML shows a new iframe named uploadFrame and the form target pointing to this iframe. The reason why this form will not need to refresh is because you are in fact making the form point to the iframe, meaning the upload will take place in the iframe now instead of on a new page; kool, huh?

So as the file uploads it sends all data to the iframe which then opens upload.php and runs the script we had before. That means that uploading without refresh is now covered, enjoy 🙂


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s