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

Question

Hi, 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 . after I have googled here and there ,I can now run my program.
these 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 refresh - just the iframe.
4. You can use some tricks to list uploaded files, their names ,sizes .. etc , and you can generate hidden inputs to hold the attachments IDs to be used when submitting the send-form (e.g, if you want to write an article ) .

The final code could be like this :

    <!-- Attach a file -->

    <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>
    <div id="ajaxResultTest"></div>

    <!-- Sending Form -->
    <form id="sendForm">
        <input type="text" value ="title">
        <textarea id="bla">

        </textarea>     
        <input type="submit" value="Send the article" id="submitBtn"/>
    </form>

javascript :

$("iframe").load(function(){
    $.post('file-component?do=getLastFile',null,function(attachment){
       // add the last uploaded file , so the user can view the uploaded files
       $("#ajaxResultTest").append("<h4>" + attachment.name + "</h4>");

       // add the attachment id as hidden input , so you can attach the file with an article (example)
       $("#sendForm").append('<input type = "hidden" name="files" value='+attachment.id+'/>');
    },'json');
});