AJAX fie upload

Uploading a file from the browser can only be done by using forms.  Even then, you should remember to set enctype='multipart/form-data' attribute on your form.  Form submissions require a page refresh.  If your app is AJAX-heavy you probably wouldn't want to refresh the page just for uploading files.

Here's what you need to do to submit a form with file inputs without refreshing the page:

1. Add an invisible iframe to your page.  Give the iframe a name.  For example, your iframe might look like: <iframe name='submit-iframe' style='display: none;'></iframe>.
2. Set the target of your form so that the form submission goes to the hidden iframe: <form method='POST' action='/upload' enctype='multipart/form-data' target='submit-iframe'>.
3. Add an onload event handler for your iframe.  This event handler will be called every time the form is submitted.  You can then read the response from the iframe's body.  A JQuery app might do it like:
   

   $(myIFrame).load(function() {
     var responseText = this.contentDocument.body.innerText;
     // Do something with response text.
   });

Update: This can lead to some weird behaviour when a user navigates away from the app and then navigates back using the browser's Back button.  (Or if the page is refreshed.)  The iframe's onload event will be fired and your event handler will be called when you don't expect it to be called.  To work around this problem, I am clearing the iframe's content immediately after copying the text into a variable.  The event handler now looks like:

$(myIFrame).load(function() {
  var responseText = this.contentDocument.body.innerText;
  if (!responseText) {
    return;
  }
  // Clear the content of the iframe.
  this.contentDocument.location.href = '/img/logo.png';

  // Do something with response text.
});