title: dynamically create an iframe, attach a form with input type file, trigger the browse and auto-submit the form
body: <p>I'm trying to achieve <em>ajax-like-file-upload-using-hidden-iframe</em>. Obviously there are many plugins available for that purpose, but I think my requirements are a bit different. So I'm trying to achieve it as follows:</p>
  
  <p>HTML:  </p>
  
  <pre><code>    &lt;!DOCTYPE&gt;
      &lt;html&gt; 
      &lt;style&gt;
          .file_upload{cursor:pointer;color:blue;text-decoration:underline;}
      &lt;/style&gt;
      &lt;body&gt;
          &lt;div class="file_upload" id="upload1" name="doc1" &gt;Upload doc1&lt;/div&gt;
          &lt;div class="file_upload" id="upload2" name="doc2" &gt;Upload doc2&lt;/div&gt;
          &lt;div id="iframe_div"&gt;&lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;  
  </code></pre>
  
  <p>JQUERY:  </p>
  
  <pre><code>$(document).ready(function(){
                  $(".file_upload").click(function(event){
                      var itr = $(".file_upload").length;
                      var iframeName = $(this).attr('name') + itr;
                      var iframeId = $(this).attr('id') + itr;
                      $('&lt;iframe /&gt;', {
                          name: iframeName,
                          id: iframeId,
                          src: 'about:blank'
                      }).appendTo('#iframe_div');
                      //append form to body of the iframe
                      $('&lt;form&gt;',{
                          name: iframeName + '_form',
                          id: iframeId + '_form',
                          action: 'actionName.action',
                          method: 'POST',
                          enctype: 'multipart/form-data'
                      }).appendTo('#' + iframeId).find('body');
                      //append file input
                      //trigger 'click' using $('#file_fld_id').trigger('click')
                      //browse to file and use 'onchange' to trigger
                                        auto-submit of  the form
                      //replace the 'file-upload' div with a progress bar...
                     //remove the iframe when upload is complete
                  });
              });
  </code></pre>
  
  <p><strong>In Short:</strong></p>
  
  <p><strong>1. Open browse window onclick of a div.</strong></p>
  
  <p><strong>2. Upload the file using hidden iframe.</strong></p>
  
  <p>But I think I'm too knowledgeable(in jquery) to achieve this. Or is it really possible?? If so please help/redirect/anything.....how come this  obvious functionality has to be implemented with work-arounds(flash,obex,silverlight,....)..ahhh.</p>
  
  <p>EDIT(to clarify a bit):</p>
  
  <p>As I mentioned 'my iframe is dynamic'...the reason is that my file inputs are supposed to be inside an already existing form with a separate action(struts2). I've got yet another action for file upload. As we can't have form inside a form, so what I'm trying is to use a div inside my existing form  for file uploading with the other action. And I've got different docs to be uploaded separately within this form. So basically I'm trying to replace each div(one being used for file upload) with a separate iframe having its own form(but same action would handle the upload) which will get auto-submitted the moment user clicks 'open' while browsing the file. I hope I'm clearer now.</p>