Here a simple function to asynchronous upload using iframe. Dont reload the page. Like AJAX but its not ajax.You dont need to create the iframe, the function do this. Work like Gmail upload and Google pages upload.

Tested in Firefox 2.0, Internet Explorer 6.0 e Opera 9.1. If you test in another browsers, please write a comment.

1) Put the code above in a file called micoxUpload.js

 /* standard small functions */
function $m(quem){
 return document.getElementById(quem)
}
function remove(quem){
 quem.parentNode.removeChild(quem);
}
function addEvent(obj, evType, fn){
 // elcio.com.br/crossbrowser
    if (obj.addEventListener)
        obj.addEventListener(evType, fn, true)
    if (obj.attachEvent)
        obj.attachEvent("on"+evType, fn)
}
function removeEvent( obj, type, fn ) {
  if ( obj.detachEvent ) {
    obj.detachEvent( 'on'+type, fn );
  } else {
    obj.removeEventListener( type, fn, false ); }
}
/* THE UPLOAD FUNCTION */
function micoxUpload(form,url_action,id_element,html_show_loading,html_error_http){
/******
* micoxUpload - Submit a form to hidden iframe. Can be used to upload
* Use but dont remove my name. Creative Commons.
* Versão: 1.0 - 03/03/2007 - Tested no FF2.0 IE6.0 e OP9.1
* Author: Micox - Náiron JCG - elmicoxcodes.blogspot.com - micoxjcg@yahoo.com.br
* Parametros:
* form - the form to submit or the ID
* url_action - url to submit the form. like action parameter of forms.
* id_element - element that will receive return of upload.
* html_show_loading - Text (or image) that will be show while loading
* html_error_http - Text (or image) that will be show if HTTP error.
*******/

 //testing if 'form' is a html object or a id string
 form = typeof(form)=="string"?$m(form):form;

 var erro="";
 if(form==null || typeof(form)=="undefined"){ erro += "The form of 1st parameter does not exists.\n";}
 else if(form.nodeName.toLowerCase()!="form"){ erro += "The form of 1st parameter its not a form.\n";}
 if($m(id_element)==null){ erro += "The element of 3rd parameter does not exists.\n";}
 if(erro.length>0) {
  alert("Error in call micoxUpload:\n" + erro);
  return;
 }

 //creating the iframe
 var iframe = document.createElement("iframe");
 iframe.setAttribute("id","micox-temp");
 iframe.setAttribute("name","micox-temp");
 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['micox-temp'].name="micox-temp"; //ie sucks

 //add event
 var carregou = function() {
   removeEvent( $m('micox-temp'),"load", carregou);
   var cross = "javascript: ";
   cross += "window.parent.$m('" + id_element + "').innerHTML = document.body.innerHTML; void(0); ";

   $m(id_element).innerHTML = html_error_http;
   $m('micox-temp').src = cross;
   //del the iframe
   setTimeout(function(){ remove($m('micox-temp'))}, 250);
  }
 addEvent( $m('micox-temp'),"load", carregou)

 //properties of form
 form.setAttribute("target","micox-temp");
 form.setAttribute("action",url_action);
 form.setAttribute("method","post");
 form.setAttribute("enctype","multipart/form-data");
 form.setAttribute("encoding","multipart/form-data");
 //submit
 form.submit();

 //while loading
 if(html_show_loading.length > 0){
  $m(id_element).innerHTML = html_show_loading;
 }

}  

2) Include this file in your HTML

 <script type="text/javascript" src="micoxUpload.js"></script>  

3) Parameters of micoxUpload function:

1. form – the form to submit or the ID of a form .
2. url_action – url to submit the form. like ‘action’ parameter of forms.
3. id_element – element that will receive return of upload.
4. html_show_loading – Text (or image) that will be show while loading
5. html_error_http – Text (or image) that will be show if HTTP error.

4) Ok. Now you have a lot of forms to call the Asynchronous upload function. 3 Examples:

4.1) Basic from a button (or input-type-button) in a form:

  <legend>Basic use</legend>
  <form>
    <input type="file" name="name" />
    <div id="upload_1" class="recebe">&nbsp;</div>
    <button onClick="micoxUpload(this.form,'upa.php','upload_1','Loading...','Error in upload'); return false;" type="button">test</button>
  </form>
 

4.2) When input-file lost focus (onblur):

 <fieldset>
<legend>On blur use</legend>
  <form>
    <input type="file" name="name" onchange="micoxUpload(this.form,'upa.php','upload_2','Loading...','Error in upload')" />
    <div id="upload_2" class="recebe">&nbsp;</div>
  </form>
</fieldset>  

4.3) Making acessible whitout JavaScript :

 <fieldset>
<legend>Unobstrusive</legend>
    <form action="upa.php" target="_blank">
    <input type="file" name="name" onchange="micoxUpload(this.form,'upa.php','upload_3','Loading...','Error in upload')" />
    <div id="upload_3" class="recebe">&nbsp;</div>
    <button type="submit">Go</button>
  </form>
</fieldset>  

Demo: http://webly.com.br/Micox/micoxUpload2.htm
Source: http://elmicoxcodes.blogspot.com/2007/03/asynchronous-upload-like-ajax-1.html

Related Listings:

1. Ajax File Upload using JQuery Script that simplifies how you traverse HTML documents, handle events, perform...
2. Ajax Style File upload for .Net If you visit Asp.net Ajax Forum, you will find hundreds...
3. uploadify – A file upload plugin using jQuery This plugin allows you to change any element with an...
4. Multiple File Upload – JQuery The Multiple File Upload Plugin (jQuery.MultiFile) is a non-obstrusive plugin...
5. New Fancy Upload version 2.0 Swiff meets Ajax for powerful and elegant uploads. FancyUpload is...

Do you like this post?

Email: