AJAX file uploader

In this post I am going to create a AJAX File Uploader. To create a pure AJAX file upload system is not possible because of security limitations of JavaScript. All of the Ajax upload systems I know use some third party tool/package or only mimics the

AJAX feeling. Even so it makes file upload process a bit nicer. In the next section I will present you a solution which imitates the AJAX process, but uses a normal upload process and iFrames.

The concept:

  • Create a simple HTML form for file upload
  • Set the target to an iFrame which is on the actual page but not visible.
  • Call a JavaScript function on form submit to display the animation.
  • After the upload process is finished by the PHP, the animation hides.

Creating the HTML file

:
Create a HTML file which contains a simple form with a file field and submit button. One important thing keep in mind is to use the enctype parameter.

<form enctype="multipart/form-data" method="post">
	 File:
<input name="myfile" type="file" />
<input name="submitBtn" type="submit" value="Upload" />
 </form>

Besides this we need to add a bit more code to it.We need a block where we will display the progress animation. We also need to add a block where we inform the visitor whether the upload was successful or not. Besides this we need to add a hidden iFrame to the page which is used as the form target. At least we add an onSubmit event to the form. So our HTML body looks like this:

 
Loading...
<img src="loader.gif" alt="" />
 
 
 
<form action="upload.php" enctype="multipart/form-data" method="post">
	 File:
<input name="myfile" type="file" />
<input name="submitBtn" type="submit" value="Upload" />
 </form>

By default the progress animation block content is hidden. We need a JavaScript function which makes this block visible if the submit button was pressed.

	function startUpload(){
	 document.getElementById("f1_upload_process").style.visibility = "visible";
	 return true;
	}

The following code shows a response message about the upload and hides the message block after that :
Code:

	function stopUpload(success){
	 var result = "";
	 if (success == 1){
	 document.getElementById("result").innerHTML =
	 "<span class="msg">The file was uploaded successfully!&lt;\/span&gt;
 
";
	 }
	 else {
	 document.getElementById("result").innerHTML =
	 "<span class="emsg">There was an error during file upload!&lt;\/span&gt;
 
";
	 }
	 document.getElementById("f1_upload_process").style.visibility = "hidden";
	 return true;
	}
</span></span>

Before we creating the PHP code we still need to create a style for the form and the progress block. The form style is very simple, but the progress online casinos block style sets the z-index, position and visibility parameter as well.
Code:

	#f1_upload_process{
	 z-index:100;
	 position:absolute;
	 visibility:hidden;
	 text-align:center;
	 width:400px;
	 margin:0px;
	 padding:0px;
	 background-color:#fff;
	 border:1px solid #ccc;
	}
 
	form{
	 text-align:center;
	 width:390px;
	 margin:0px;
	 padding:5px;
	 background-color:#fff;
	 border:1px solid #ccc;
 
	}

Now we can focus on the server side.

Server side code:

First we need to set the file destination path. In this case we will use the actual working directory. Afterwards we introduce a variable that shows if there was an error or not during the upload process. Next we move the uploaded file from the tmp directory to it”s defined location and set the result variable if upload was success. At the end I have inserted a sleep command to make animation a bit longer in case of very fast uploads.
Now the end the PHP code looks like this:
Code:

	 $destination_path = getcwd().DIRECTORY_SEPARATOR;
 
	 $result = 0;
 
	 $target_path = $destination_path . basename( $_FILES["myfile"]["name"]);
 
	 if(@move_uploaded_file($_FILES["myfile"]["tmp_name"], $target_path)) {
	 $result = 1;
	 }
 
	 sleep(1);

Finish the work from iFrame:

The output of the PHP code will be displayed / executed inside the iFrame. As you remember the iFrame is not visible, however we can call a JavaScript function here. And exactly this is the point where we can call the JavaScript function defined in the HTML code to hide the progress animation and display the file upload result on the main page. We can do it with the following JavaScript code:

Code:

	<script type="text/javascript"><!--mce:0--></script>

You can see a working demo of AJAX File Uploader as well.

Comments
  1. Pia
    • Buffy
  2. Aojr
    • Gertie
  3. Waltmon
    • Charl
  4. Morey Narvaez
  5. Dahood
  6. Rosann Gaudy
  7. Rupert Brummell

Leave a Reply

Your email address will not be published. Required fields are marked *

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.


Skip to toolbar