Ajax File Upload Tutorial

In this article you will see how to upload file using JavaScript, iFrame so that it looks like uploading file using Ajax. As we know that to create a pure Ajax file upload system is not possible because of security limitations of JavaScript. All of the Ajax upload systems use some third party tools for the AJAX feeling.

The concept:

  • Create a simple HTML form to browse file
  • Set the target to an iFrame which is on an actual page but hidden
  • Call a JavaScript function on submit form to display the animation
  • Hide the animation when PHP part finishes the upload process


The HTML file we will use in this article is quite simple. It just have a simple form with a file field and a submit button. However don’t forget about the enctype parameter in the <form> HTML tag. Use the below code to create the form:

    <div id=”wrap”>
<div id=”content”>
<form action=”upload_file.php” method=”post” enctype=”multipart/form-data” target=”upload_target” onsubmit=”startUpload();” >
<label>Browse File:
<input name=”browse_file” type=”file” size=”30″ />
</label>
<label>
<input type=”submit” name=”submitBtn” value=”Upload” />
</label>
</p>

<iframe id=”upload_target” name=”upload_target” src=”#” style=”width:0;height:0;border:0px solid #fff;”></iframe>
</form>
</div><!–/#content–>
<div id=”footer”><a href=”http://web.tutpub.com” target=”_blank”>Powered by Tuts Publications Network</a></div>
</div><!–/#wrap–>

Use the below CSS to get a good look to the form:

body {
padding-top: 50px;
background-color: #EEEEEE;
font-family:”Times New Roman”, Times, serif;
}
#wrap {
margin: auto;
width: 450px;
border-width: 0px 1px 1px 1px;
border-style: solid #000033;
background-color: #FFFFFF;
}
#wrap #content {
padding: 5px;
font-size: 12px;
font-weight: normal;
color: #666666;
}
#wrap #footer {
font-size: 12px;
text-align: right;
border-top:1px #CCCCCC solid;
padding: 5px 10px 5px 5px;
}
#wrap #footer a {
color: #121212;
text-decoration: none;
font-size: 10px;
}
#wrap #content #form1 legend {
padding: 5px;
margin: auto;
}
form {
margin: 10px 5px 0px 5px;
}
label {
padding: 0px;
text-align: center;
}
.msg {
text-align:left;
color:#CC9966;
background-repeat: no-repeat;
padding:5px;
}
#wrap_form{
height:100px;
}
#wrap_form {
font-size: 12px;
font-weight: normal;
color: #666666;
}
#action_process{
z-index:100;
visibility:hidden;
position:absolute;
text-align:center;
width:400px;
}

 

Above HTML and CSS code will generate an HTML form exactly like below screen shot:

html form to upload file using ajax

Now we need two blocks where we will display the progress animation and in another block we will inform the user whether the upload was success or not. By default the progress animation block content is hidden. Just add the below code immediately before the <label> tag in the <form> tag –

<p id=”action_process”>Loading…<br/><img src=”loader.gif” /><br/></p>
<p id=”wrap_form” align=”center”><br/>

Above HTML includes an image. Please collect the image from the script that I have attached at the bottom of this article.
Now we will add a hidden iFrame to the page which is used as the form target. See the code below:

<iframe id=”upload_target” name=”upload_target” src=”#” style=”width:0;height:0;border:0px solid #fff;”></iframe>

 

Now We need to write a JavaScript function which makes this block visible if the submit button was pressed. It is a very simple code that only changes the visibility parameter. Check the below Javascript Code:

function startUpload(){
document.getElementById(‘action_process’).style.visibility = ‘visible’;
document.getElementById(‘wrap_form’).style.visibility = ‘hidden’;
return true;
}

 

Let’s add another JavaScript function that will call at the end of the upload process. This code will be print out a result message depending on its parameter and hides the progress block again. See the below JavaScript Script:

function stopUpload(success){
var result = ”;
if (success == 1){
result = ‘<span>Success :: File was uploaded<\/span><br/><br/>’;
} else {
result = ‘<span>Error :: during file upload!<\/span><br/><br/>’;
}
document.getElementById(‘action_process’).style.visibility = ‘hidden’;
document.getElementById(‘wrap_form’).innerHTML = result + ‘<label>File: <input name=”browse_file” type=”file” size=”30″ /><\/label><label><input type=”submit” name=”submitBtn” value=”Upload” /><\/label>’;
document.getElementById(‘wrap_form’).style.visibility = ‘visible’;
return true;
}

 

Let’s focus on the server side code. Create a PHP file called “upload_file.php”. The server side code is written in that “upload_file.php” file and it is very short and simple. Check the code below:

<?php
// Built the path to upload files
$target_path = getcwd().DIRECTORY_SEPARATOR.”uploaded_files”.DIRECTORY_SEPARATOR;
$isSuccess = 0;
$target_path = $target_path . basename( $_FILES[‘browse_file’][‘name’]);
if(@move_uploaded_file($_FILES[‘browse_file’][‘tmp_name’], $target_path)) {
$isSuccess = 1;
}
sleep(1);
?>
<script language=”javascript” type=”text/javascript”>window.top.window.stopUpload(<?php echo $isSuccess; ?>);</script>

 

The $target_path  variable store the directory path to upload any file. The DIRECTORY_SEPARATOR is a pre-defined PHP constant. The move_uploaded_file() function checks to ensure that the file designated by the first parameter is a valid upload file. If the file is valid, it will be moved the file given by the second parameter. The sleep() command is used to make animation a bit longer in case of very fast uploads. As we know the iFrame is not visible, however we can call a JavaScript function here. And exactly this is the point where we called the JavaScript function defined in the HTML code to hide the progress animation and display the file upload result on the main page.

It’s time to check the script you learn from this article. For your better practice we just attach the entire scripts. Download the AJAX File Upload Scripts.

Author Info

Shah Alom

Hi, This is Mohammad Shah Alom, My passion is Programming & Web Development. I am Founder of Micro Solutions Bangladesh. My Facebook profile shahalom1983 & Twitter Profile shahalom_83