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

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="" method="post" enctype="multipart/form-data"  target="uploadTrg">

        File: <input type="file" name="file">
        <input type="submit" value="Submit" id="submitBtn"/>


    <div id="ajaxResultTest"></div>

javascript :

    // 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 ? 

       // add the last uploaded file , so the user can see the uploaded files
       $("#ajaxResultTest").append("<h4>" + + ":" + "</h4>");


Leave a Comment