How to make Asynchronous(AJAX) File Upload using iframe?

Question

I'm trying to make ajax file upload . I read that it is not possible to do that without using iframe .
I wrote :

<iframe id="uploadTrg" name="uploadTrg" height="0" width="0" frameborder="0" scrolling="yes"></iframe> <form id="myForm" action="file-component" method="post" enctype="multipart/form-data"  target="uploadTrg"> File: <input type="file" name="file"> <input type="submit" value="Submit" id="submitBtn"/> </form> 

and using jquery form plugin :

$('#myForm').ajaxForm({     dataType:  'json',     success:   function(data){         alert(data.toSource());     } }); 

The Result :

the file is uploaded successfully and I can see the uploaded file , but a dialog box appears :

since I send back a json result to display the file name + size etc ..

My Question : How can I use the iFrame to be able to make " ajax file upload".

Note:

1. I don't prefer to use special plugin to upload file , if there is more appropriate/easier solutions.
2. I use jsp/servlets as a server-side language .. but I think it does not make sense which language I use .

Thanks

Answer 1

I will answer my question , I think I found the solution. These are the steps that I followed to achieve the goal :

1. Make the attribute "target" of the form point to " iframe " .
2. Use a normal HTML request ( not Asynchronous/Ajax request ) to submit the form.
3. Because the target frame is iframe , the whole page will not be refreshed - just the iframe.
4. Once iframe onload event happens (capture that event using Javascript) then do what you want, e.g. You can send back a request to list recent uploaded file info.

The final code looks like this:

    <!-- Attach a file -->      <iframe id="uploadTrg" name="uploadTrg" height="0" width="0" frameborder="0" scrolling="yes"></iframe>      <form id="myForm" action="http://example.com/file-upload-service" method="post" enctype="multipart/form-data"  target="uploadTrg">          File: <input type="file" name="file">         <input type="submit" value="Submit" id="submitBtn"/>      </form>      <div id="ajaxResultTest"></div> 

javascript :

$("iframe").load(function(){     // ok , now you know that the file is uploaded , you can do what you want , for example tell the user that the file is uploaded      alert("The file is uploaded");      // or you can has your own technique to display the uploaded file name + id ?      $.post('http://example.com/file-upload-service?do=getLastFile',null,function(attachment){         // add the last uploaded file , so the user can see the uploaded files        $("#ajaxResultTest").append("<h4>" + attachment.name + ":" + attachment.id "</h4>");      },'json'); });