Ajax: a simplified version of file upload form using IFRAME

I have been trying to create file upload form in Ajax. Most of the tutorials I found are using <IFRAME> technique as a hidden frame. In OpenJS, it gives an excellent tutorial. In a nutshell, the file upload form redirects the reload action into the hidden frame. Then uses the top window to fetch the results (using JSON) when the hidden frame is loaded which indicates a file has been uploaded. This technique involves setting up the onload and onsubmit event handlers while the main page is loaded.

However, my scenario is slightly different that the <DIV> box in my page is inserted dynamically with different forms, like Ajax.Updater(‘action_box’, ‘action_form.html’), during the users navigation. So that I cannot rely on setting up onsubmit and onLoad event handlers when the main page is loaded. Here is a slightly modified and simplified version of the one in OpenJS to cater for this scenario. It is imperative that you understand the OpenJS tutorial first.

First of all, we have a HTML file upload form like this:

<FORM action='save_upload.php' method=post enctype='multipart/form-data' target=hidden_upload>
<DIV><input type=file name='upload_scn' class=file_upload></DIV>
<INPUT type=submit name=submit value=Upload />
<IFRAME id=hidden_upload name=hidden_upload src='' onLoad='uploadDone("hidden_upload")'
        style='width:0;height:0;border:0px solid #fff'></IFRAME>
</FORM>

Note that the key differences are the target and onLoad attributes in FORM and IFRAME tags respectively. Once the above HTML code is loaded, the web client uploads the file to the server. The web server processes the file and sends the result in JSON to the client. The target attribute in the FORM tells the client to load the result in the hidden IFRAME. After the result is displayed in the hidden IFRAME, the onLoad event is triggered and executes the main javascript uploadDone function.

The uploadDone function is defined as below and it is loaded in the main page javascript section.

function getFrameByName(name) {
  for (var i = 0; i < frames.length; i++)
    if (frames[i].name == name)
      return frames[i];

  return null;
}

/* Same as the one defined in OpenJS */
function uploadDone(name) {
   var frame = getFrameByName(name);
   if (frame) {
     ret = frame.document.getElementsByTagName("body")[0].innerHTML;

     /* If we got JSON, try to inspect it and display the result */
     if (ret.length) {
       /* Convert from JSON to Javascript object */
       var json = eval("("+ret+")");
       /* Process data in json ... */
       ....
     }
  }
}
 

On the server side, the save_upload.php page is simply defined like this:

<?php
  $target_filepath = "/tmp/" . basename($_FILES['upload_scn']['name']);

  if (move_uploaded_file($_FILES['upload_scn']['tmp_name'], $target_filepath)) {
    $result = ....
  }

echo json_encode($result);
?>

At the time of writing, this example works on IE 8, Safari 4 and Firefox 3. Hope this helps.

I work for iTrinegy and here are my other Javascript blogs