¿Cómo hacer el upload de un archivo de forma asincrona y sin tener que refrescar la página?

A continuación se presenta un ejemplo de como hacer el upload de archivos, de forma de no tener que recargar la página como si fuera una petición AJAX.

La idea: La idea consiste en hacer que el target del form apunte a un IFrame oculto, de esta forma no se redirecciona la página.

<?xml:namespace prefix = html />
  <html:form enctype="multipart/form-data"
           target="upload_target" method="post"
           action="nombreDelAction.action">
 <html:file title="Buscar" property="theFile"></html:file>
 <html:select property="fileType">
  <html:option value="0">Texto</html:option>
  <html:option value="1">XML</html:option>
 </html:select> 
 <html:image src="images/boton_flecha_gr.gif"></html:image>   
</html:form> 
<iframe id="upload_target"
                  style="WIDTH: 0px; HEIGHT: 0px"
                  name="upload_target" src="">
</iframe>
       

Tambien se puede usar el IFrame visible para darle un feedback al usuario, o que cuando se cargue active alguna función javascript que lo haga.

El resultado permite cargar archivos de igual forma que lo hace gmail.

Si quieren pueden ver el siguiente archivo que creé: uploadFile.js