file upload using iframe

 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