AJAX File Upload


Image result for AJAX File UploadThe 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
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=”” then the form data will be received and processed by the webpage “”. The target property specify that where the action URL, “” 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.
Basic principle of working
The basic principle of AJAX style file upload using iframe is as follows.
1. Put a blank division to display the feedback from the server.
2. 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.
3. 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.
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.


Please enter your comment!
Please enter your name here