Ajax File Upload
You might have seen Ajax File Uploading in some sites. The basic idea is to upload a file without refreshing the page. Some sites go even further by providing details on how much percentage is uploaded, etc. It is very easy to achieve this effect using javascript.
First off, I did not like using the term 'Ajax' when describing this method. But there is no other word that can be used. And this method fits within my definition of Ajax - "Sending or receiving data from the server without refreshing the page.". So I will name this method Ajax file upload.
Theory
The basic idea behind this effect is to redirect a form's action into a hidden IFrame. So, when the form with the file field is submitted, the result will appear in a IFrame. But since it is hidden, the user will not see it. This effect is achieved using the 'target' attribute of the Form tag.
See the small squire? That is the IFrame. Typically, it will be hidden.
Code
(X)HTML
<form id="file_upload_form" method="post" enctype="multipart/form-data" action="upload.php">
<input name="file" id="file" size="27" type="file" /><br />
<input type="submit" name="action" value="Upload" /><br />
<iframe id="upload_target" name="upload_target" src="" style="width:0;height:0;border:0px solid #fff;"></iframe>
</form>
JavaScript
function init() {
document.getElementById('file_upload_form').onsubmit=function() {
document.getElementById('file_upload_form').target = 'upload_target'; //'upload_target' is the name of the iframe
}
}
window.onload=init;
PHP
This should be in upload.php - the action of the form.
<?php
include('../../../common.php');
upload('file','.','txt,jpg,jpeg,gif,png');
The code to upload the file must be given here. I used one of my custom functions to upload the file - it is not a native PHP function. Needless to say, this is not restricted to PHP - you can use any server side language here.

Comments
it will be interesting to see how it could give details on how much percentage is uploaded?
cheers
This is some other way to submit form. Sorry you can't say it AJAX.
And it is correct to call it AJAX, as AJAX 'calls' can be implemented either with XMLHttpRequests or with IFrames. In some frameworks you even get to choose which method is used to make the 'calls'.
Plz wud u explain a context in which this code wud be of use.
I was wondering how I might do this with httpRequest instead as well.
If someone would be so kind as to help me my E..!!(E($& - Mai1 is
dan ...-~~~at~~~-- danmckinnon )*)*&)* --~~~d0t~~-- net
(and of coarse ignore all the funny charecters, it's to avoid bots from grabbing my e-mail address)
This doesn't seem to be working in IE.
Any reason for that?
Cheers
Thanks for your reply
I'm using version 6.0
Cheers
Bruno
follow the following like you can find useful code
www.webtoolkit.info/ajax-file-upload.html
www.seemysites.net/projFolder/uploader/
I am also not able to get any of the examples of this method (i.e. iframes) to work with IE 6. If anyone has been able to do it please post it here.
Since Ajax stands for for "Asynchronous JavaScript and XML", I have a feeling there is no way to do file uploads since JSON and XML can only work with text going to and coming from the server. I still can't find a way to send a file over using pure AJAX. Please prove me wrong if you can.
Thank you it is realy very good idea, i used it, it is woking well
thank you
Praveen
Nice work.
BTW - The "not Ajax" people: The _point_ of Ajax is to not have to reload the page, regardless of the technique used.
& Ajax Design patterns , and i am sure that u have used that the basics quiet right , in all a simple idea but with great impact.
I am also looking for the progress bar and State Complete Callbacks after the file upload process.
Thanx Again.
Thanks for the script!.
a, strong, em, b, i, code, pre, pandbrallowed. Other tags will be shown as code(< will become <). Urls, Line breaks will be auto-formated.