Ajax based file upload component
The purpose of AJAX file uploading is to upload files without refreshing the screen. Actually functions like a regular file upload but it mimics the AJAX feeling by using the iframe html object. In this article, we use a PHP script in the server to recieve the files. Here are the basic steps to create the component.
- Create a sample HTML form for file upload
- Create a hidden iframe tag
- Set the target of form tag to the hidden iframe
- Create a javascript function for initiating animation effect
- Create a javascript function for stopping the animation effect
- Call a javascript function on form submit for giving some animation effect
- Create a server side PHP file for handling File uploading and return a javascript string for calling javascript function
Create a sample HTML form for file uploadCreate a hidden iframe tagSet the target of form tag to the hidden iframeCreate a javascript function for initiating animation effectCreate a javascript function for stoping the animation effectCall a javascript function on form submmit for giving some animation effectCreate a server side PHP file for handling File uploading and return a javascript string for calling javascript function
Step 1 – Create a HTML form
Here we are going to create a sample html form for file uploading.
<form action="upload.php" method="post" enctype="multipart/form-data">
Select File: <input name="upload_file" type="file" />
<input type="submit" name="submit" value="Upload" />
</form>
Step 2 – Create a Hidden iframe tag
Here we are going to create a hidden iframe.
<iframe id="target_iframe" name="target_iframe" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
Step 3 – Set target of form as iframe
<form action="upload.php" method="post" enctype="multipart/form-data" target="target_iframe">
Select File: <input name="upload_file" type="file"/>
<input type="submit" name="submit" value="Upload"/>
</form>
<iframe id="target_iframe" name="target_iframe" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
Step 4 – Create a javascript function for initiating an animation effect
function putAnimation(){
document.getElementById('animation_area').style.visibility = 'visible';
return true;
}
Step 5 – Create a javascript function for stopping the animation effect
function removeAnimation(success){
var result = '';
if (success == 1){
document.getElementById('upload_result').innerHTML = 'The file was uploaded successfully!';
}
else {
document.getElementById('upload_result').innerHTML = 'There was an error during file upload!';
}
document.getElementById('animation_area').style.visibility = 'hidden';
return true;
}
Step 6 – Call a javascript function on form submit giving some animation effect
<form action="upload.php" method="post" enctype="multipart/form-data" target="target_iframe" onsubmit="putAnimation();">
***
</form>
Now the HTML form looks like this
<html>
<head>
<script language="javascript" type="text/javascript" >
function putAnimation(){
document.getElementById('animation_area').style.visibility = 'visible';
return true;
}
function removeAnimation(success){
var result = '';
if (success == 1){
document.getElementById('upload_result').innerHTML = 'The file was uploaded successfully!';
}
else {
document.getElementById('upload_result').innerHTML = 'There was an error while uploading!';
}
document.getElementById('animation_area').style.visibility = 'hidden';
return true;
}
</script>
</head>
<body>
<p id="animation_area" >Loading... <br/ > <img src="loader.gif" / > </p>
<p id="upload_result" > </p>
<form action="upload.php" method="post" enctype="multipart/form-data" target="target_iframe" onsubmit="putAnimation();" >
Select File: <input name="upload_file" type="file" />
<input type="submit" name="submit" value="Upload" />
</form>
<iframe id="target_iframe" name="target_iframe" src="#" style="width:0;height:0;border:0px solid #fff;" > </iframe>
</body>
</html>
Step 7 – Create a server side PHP file for handling File uploading
At the end of the PHP code we have used a sleep function to make the client side animation a bit longer in case of fast uploads.
At the end of the file we have used a javascript code for executing the client sile function which handles the result of file uploads
<?php
$destination_path = getcwd().DIRECTORY_SEPARATOR;
$result = 0;
$target_path = $destination_path . basename( $_FILES['upload_file']['name']);
if(@move_uploaded_file($_FILES['upload_file']['tmp_name'], $target_path)) {
$result = 1;
}
sleep(1);
?>
<script language="javascript" type="text/javascript">
parent.removeAnimation(<?php echo $result; ?>);
</script>
