AJAX file upload using iframe
The main reason why webmasters like to use AJAX technology to submit user data input is that unlike conventional form submit it can transfer data to the server without refreshing webpage. This technology can also capable to display the response from server side to the client computer. But AJAX technology can only transfer text data in UTF-8 format. So upload file using AJAX technology is not possible. But using iframe object it is possible to create an interface over a HTML form such that it produces an effect AJAX upload, i.e. it can upload one or more files without refreshing the webpage and also display the server response.
Action and Target property of HTML form
To understand the entire mechanism we must review two basic properties of a HTML form. They are "action" and "target". The action property specifies the URL which will handle the submitted data by the form. If action="handler.php" then the form data will be received and processed by the webpage "handler.php". The target property specify that where the action URL, "handler.php" in this case will open. It may have value "_blank", "_parent", "_self", "_top" or [name of an iframe]. The default value is "_self", i.e. the action URL will open on the same window from where the form has been submitted.
The basic principle of AJAX style file upload using iframe is as follows.
- Put a blank division to display the feedback from the server.
- Put a hidden iframe object. Though the working of the system does not depend at all on the appearance of the iframe whether it is visible or not, it only keeps the system clean and nice.
- Put a conventional file upload form with just one exception, set its target property to the name of that iframe.
Now when user select a file and submit the form the action URL, instead of opening in the same window will be opened within that hidden iframe which is invisible to the viewers. So the entire webpage will not be refreshed. After execution of the upload handler script (defined by the action property of the upload form) the response from this page may contain suitable JavaScript code to display message in the blank division over the parent document.
Practical example
Here is a practical example of Ajax style file upload form.
File uploader form :: uploader.html
<html> <head> <title>File upload example</title> </head><body> <h1>File upload example</h1> <div id="feedback"></div> <iframe name="upload_iframe" src="" style="display:none;"></iframe> <form method="post" enctype="multipart/form-data" action="handler.php" target = "upload_iframe"> <input type="hidden" name="MAX_FILE_SIZE" value="20000" /> <input name="file" size="20" type="file" /> <input type="submit" name="submit" value="Upload" /> </form> </body> </html>
The code of upload handler file is as follows.
Uploader handler php code :: handler.php
<?php
function upload_file($path)
{
if(!(isset($_POST['submit']))){exit;}
if($_FILES["file"]["size"] > 20000){exit;}
$err=$_FILES["file"]["error"];
$message='<div style="margin:5px; color:red;">Upload fails! ';
if ($err > 0){
switch($err){
case '1':
$message.='php.ini max file size exceeded.';
break;
case '2':
$message.='max file size exceeded.';
break;
case '3':
$message.='file upload was only partial.';
break;
case '4':
$message.='no file was attached.';
break;
case '7':
$message.='file permission denied.';
break;
default :
$message.='Unexpected error occers.';}
$message.='</div>';
}
else{
if (file_exists($path.$_FILES["file"]["name"])){
$message.='file already exist.</div>';}
else{
@move_uploaded_file($_FILES["file"]["tmp_name"],$path. $_FILES["file"]["name"]);
$message='<div style="margin:5px; color:green;">File has been successfully uploaded.</div>';}
}
return $message;
}
$response=upload_file('upload_dir/');
echo '<script>parent.document.getElementById("feedback").innerHTML="'.addslashes($response).'";</script>';
?>
Carefully look on the above code, the response from this file is JavaScript code which displays a message in the feedback element of the parent document. As this script is going to open on the iframe object so its parent is the main document, i.e. uploader.html.
Use and prospects
The principle of working of submitting form data using iframe should not be limited only to upload file. Since AJAX technology can transfers unencrypted data from client computer to the server so passing sensitive data like password in this method over the channel is not very safe. In such cases web designer may like to use this technique of form submit method instead of AJAX.
