?1 < html >
?2 < head >
?3 < script? type =”text/javascript” >
?4 TotalFileFields? = ? 5 ;
?5 StartUpload? = ? false ;
?6 CurrentFormID? = ? 1 ;
?7 ?
?8 function ?FilesUpload()? {
?9 ???? while ?( 1 )? {
10 ???????? if ?(CurrentFormID? > ?TotalFileFields)? return ? true ;
11 ???????? if ?(eval(’document.frm’? + ?CurrentFormID? + ?‘.upFile.value’)? == ?”)? {
12 ????????????CurrentFormID ++ ;
13 ???????????? continue ;
14 ????????}
15 ???????? break ;
16 ????}
17 ????StartUpload? = ? true ;
18 ????eval(’document.frm’? + ?CurrentFormID? + ?‘.submit()’);
19 ???? return ? false ;
20 }
21 ?
22 function ?myIFrame_OnLoad()? {
23 ???? if ?( ! StartUpload)? return ;
24 ????CurrentFormID ++ ;
25 ???? if ?(FilesUpload())? {
26 ????????StartUpload? = ? false ;
27 ????????CurrentFormID? = ? 1 ;
28 ????????alert(’UPLOAD?COMPLETE’);
29 ????}
30 }
31 ?
32 function ?GenerateUploadForms()? {
33 ???? for ?(i? = ? 1 ;?i? <= ?TotalFileFields;?i ++ )? {
34 ????????document.write(’ < form?name = ”frm’? + ?i? + ?‘”?method = ”post”?action = ”http: // localhost/”?target=”myIFrame”?enctype=”multipart/form-data”>’);
35 ????????document.write(’ < input?type = ”file”?name = ”upFile” /></ form > \n’);
36 ????}
37 }
38 </ script >
39 </ head >
40 < body >
41 < script? type =”text/javascript” > GenerateUploadForms(); </ script >
42 < input? type =”button”? value =”UPLOAD”? onclick =”FilesUpload();” />
43 < iframe? id =”myIFrame”? name =”myIFrame”? onload =”myIFrame_OnLoad();”? style =”display:none;” ></ iframe >
44

?1 //creating?the?iframe
?2 ?var?iframe?=?document.createElement("iframe");
?3 ?iframe.setAttribute("id","micox-temp");
?4 ?iframe.setAttribute("name","micox-temp");
?5 ?iframe.setAttribute("width","0");
?6 ?iframe.setAttribute("height","0");
?7 ?iframe.setAttribute("border","0");
?8 ?iframe.setAttribute("style","width:?0;?height:?0;?border:?none;");
?9 ?
10 ?//add?to?document
11 ?form.parentNode.appendChild(iframe);
12 ?window.frames['micox-temp'].name="micox-temp";?//ie?sucks

http://elmicoxcodes.blogspot.com/2007/03/asynchronous-upload-like-ajax-1.html

Ajax extensions does not support file upload. So, what I have done is create an iframe and put a file upload form inside that iframe. When the upload is complete, the event can then be relayed to the ajax trigger events and do additional tasks in ordinary ajax coding.

This method can also be made GMail like. You can control anything of the iframe using javascript. And hence you can do something like IFrame.forms[0].submit() in javascript to automatically start files uploading (and as it is iframe, it would not look like form post). You can also easily poll the status of the iframe, so that if user clicks other form buttons in your page, you can wait for iframe to complete upload and then finally do other task.

?

file upload using iframe