Ajax Style File Uploading using Hidden iFrame

File uploading using AJAX is not possible. AJAX doesn’t actually post forms to the server, it sends selected data to the server in the form of a POST or GET request. As javascript is not capable of grabbing the file from the users machine and sending it to the server, it’s just not possible with AJAX. You have to resort to regular old form submit.

If you have read/seen it somewhere, then it is not through AJAX. File uploading occurs through an iframe in this case. You have to use a iframe to upload the files. So, you can use iframe to asynchronous upload (Like AJAX , but its not AJAX).

How file uploading is done in Gmail? Use following JavaScript function, if you want to achieve same functionality.

<html>

<script language="Javascript">
function fileUpload(form, action_url, div_id) {
    // Create the iframe...
    var iframe = document.createElement("iframe");
    iframe.setAttribute("id", "upload_iframe");
    iframe.setAttribute("name", "upload_iframe");
    iframe.setAttribute("width", "0");
    iframe.setAttribute("height", "0");
    iframe.setAttribute("border", "0");
    iframe.setAttribute("style", "width: 0; height: 0; border: none;");

    // Add to document...
    form.parentNode.appendChild(iframe);
    window.frames['upload_iframe'].name = "upload_iframe";

    iframeId = document.getElementById("upload_iframe");

    // Add event...
    var eventHandler = function () {

            if (iframeId.detachEvent) iframeId.detachEvent("onload", eventHandler);
            else iframeId.removeEventListener("load", eventHandler, false);

            // Message from server...
            if (iframeId.contentDocument) {
                content = iframeId.contentDocument.body.innerHTML;
            } else if (iframeId.contentWindow) {
                content = iframeId.contentWindow.document.body.innerHTML;
            } else if (iframeId.document) {
                content = iframeId.document.body.innerHTML;
            }

            document.getElementById(div_id).innerHTML = content;

            // Del the iframe...
            setTimeout('iframeId.parentNode.removeChild(iframeId)', 250);
        }

    if (iframeId.addEventListener) iframeId.addEventListener("load", eventHandler, true);
    if (iframeId.attachEvent) iframeId.attachEvent("onload", eventHandler);

    // Set properties of form...
    form.setAttribute("target", "upload_iframe");
    form.setAttribute("action", action_url);
    form.setAttribute("method", "post");
    form.setAttribute("enctype", "multipart/form-data");
    form.setAttribute("encoding", "multipart/form-data");

    // Submit the form...
    form.submit();

    document.getElementById(div_id).innerHTML = "Uploading...";
}
</script>

<!-- index.php could be any script server-side for receive uploads. -->
<form>
<input type="file" name="datafile" /></br>
<input type="button" value="upload" 
        onClick="fileUpload(this.form,'index.php','upload'); return false;" >
<div id="upload"></div>
</form>

</html>


71 Comments

  • Ajay 15 February, 2014, 12:56

    Hi,
    I found this post really helpful.But I am facing some issues in here.After file upload the message inside the is not getting cleared.Also the the filename selected earlier is also not getting cleared when we click for a new upload.

  • Nibu 17 February, 2014, 17:15

    Thanks for the tutorial. I tried the above solution in IE8 and it is throwing “Access is denied” error

  • Ambika 4 March, 2014, 13:49

    Amazing, it works :). Thanks

  • Shantanu 11 April, 2014, 20:00

    Awesome solution, It worked for me. I faught a lot to achieve file upload functionality in modal dialog and finally got this solution.Thanks Very Much.

  • Anurag 21 May, 2014, 15:50

    Thnks But How to create scripted server to recieve uploads….??

  • crzhacko 9 July, 2014, 17:30

    What’s the difference between ‘iframe’ and ‘iframeId’ variables? I guess they are same.

  • Walid 24 July, 2014, 18:18

    It worked very well for me !! Thank you very much :D

  • Umair Hamid 26 July, 2014, 12:57

    You are just great man, Tell me how can I cad image path in it. I am already echo in php

  • SMan 12 August, 2014, 15:26

    Amazing, works as-is!! Great!!!

  • Nelson Rakson 4 September, 2014, 5:50

    Nice work but you made it more complicated! It could be simplified a lot

    • rocbar 12 September, 2014, 7:59

      Nelson – Can you provide a working version of a simplified script?

  • Shekhar 11 September, 2014, 16:15

    Hi Viral

    Thanks for uploading this post.
    really very helpful

    I have integrated the code u provided but on IE8 it is returning a download pop up which contains json response which currenly we are printing on page.

    is there any workaround to prevent this pop up.

  • Murthy 24 September, 2014, 1:48

    What is the Controller logic?
    Can I use like this?
    @RequestMapping(value={“index.php”}, method=RequestMethod.POST)
    public @ResponseBody boolean optInFileUpload(CommonsMultipartFile file){…. }

Leave a Reply

Your email address will not be published. Required fields are marked *

Note

To post source code in comment, use [code language] [/code] tag, for example:

  • [code java] Java source code here [/code]
  • [code html] HTML here [/code]

Current ye@r *