ajax upload - Like AJAX

ajax upload - Like AJAX

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

1. /* standard small functions */
   
2. function $m(quem){
   
3. return document.getElementById(quem)
   
4. }
   
5. function remove(quem){
   
6. quem.parentNode.removeChild(quem);
   
7. }
   
8. function addEvent(obj, evType, fn){
   
9. // elcio.com.br/crossbrowser
   
10.     if (obj.addEventListener)
    
11.         obj.addEventListener(evType, fn, true)
    
12.     if (obj.attachEvent)
    
13.         obj.attachEvent("on"+evType, fn)
    
14. }
    
15. function removeEvent( obj, type, fn ) {
    
16.   if ( obj.detachEvent ) {
    
17.     obj.detachEvent( 'on'+type, fn );
    
18.   } else {
    
19.     obj.removeEventListener( type, fn, false ); }
    
20. }
    
21. /* THE UPLOAD FUNCTION */
    
22. function micoxUpload(form,url_action,id_element,html_show_loading,html_error_http){
    
23. /******
    
24. * micoxUpload - Submit a form to hidden iframe. Can be used to upload
    
25. * Use but dont remove my name. Creative Commons.
    
26. * Versão: 1.0 - 03/03/2007 - Tested no FF2.0 IE6.0 e OP9.1
    
27. * Author: Micox - Náiron JCG - elmicoxcodes.blogspot.com - [email][email protected][/email]
    
28. * Parametros:
    
29. * form - the form to submit or the ID
    
30. * url_action - url to submit the form. like action parameter of forms.
    
31. * id_element - element that will receive return of upload.
    
32. * html_show_loading - Text (or image) that will be show while loading
    
33. * html_error_http - Text (or image) that will be show if HTTP error.
    
34. *******/
    
35. 
    
36. //testing if 'form' is a html object or a id string
    
37. form = typeof(form)=="string"?$m(form):form;
    
38. 
    
39. var erro="";
    
40. if(form==null || typeof(form)=="undefined"){ erro += "The form of 1st parameter does not exists.\n";}
    
41. else if(form.nodeName.toLowerCase()!="form"){ erro += "The form of 1st parameter its not a form.\n";}
    
42. if($m(id_element)==null){ erro += "The element of 3rd parameter does not exists.\n";}
    
43. if(erro.length>0) {
    
44.   alert("Error in call micoxUpload:\n" + erro);
    
45.   return;
    
46. }
    
47. 
    
48. //creating the iframe
    
49. var iframe = document.createElement("iframe");
    
50. iframe.setAttribute("id","micox-temp");
    
51. iframe.setAttribute("name","micox-temp");
    
52. iframe.setAttribute("width","0");
    
53. iframe.setAttribute("height","0");
    
54. iframe.setAttribute("border","0");
    
55. iframe.setAttribute("style","width: 0; height: 0; border: none;");
    
56. 
    
57. //add to document
    
58. form.parentNode.appendChild(iframe);
    
59. window.frames['micox-temp'].name="micox-temp"; //ie sucks
    
60. 
    
61. //add event
    
62. var carregou = function() {
    
63.    removeEvent( $m('micox-temp'),"load", carregou);
    
64.    var cross = "javascript: ";
    
65.    cross += "window.parent.$m('" + id_element + "').innerHTML = document.body.innerHTML; void(0); ";
    
66.    
    
67.    $m(id_element).innerHTML = html_error_http;
    
68.    $m('micox-temp').src = cross;
    
69.    //del the iframe
    
70.    setTimeout(function(){ remove($m('micox-temp'))}, 250);
    
71.   }
    
72. addEvent( $m('micox-temp'),"load", carregou)
    
73. 
    
74. //properties of form
    
75. form.setAttribute("target","micox-temp");
    
76. form.setAttribute("action",url_action);
    
77. form.setAttribute("method","post");
    
78. form.setAttribute("enctype","multipart/form-data");
    
79. form.setAttribute("encoding","multipart/form-data");
    
80. //submit
    
81. form.submit();
    
82. 
    
83. //while loading
    
84. if(html_show_loading.length > 0){
    
85.   $m(id_element).innerHTML = html_show_loading;
    
86. }
    
87. 
    
88. }

复制代码

2) Include this file in your HTML

1. <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:

1. 4.1) Basic from a button (or input-type-button) in a form:
   
2. 
   
3. [code]<legend>Basic use</legend>
   
4.   <form>
   
5.     <input type="file" name="name" />
   
6.     <div id="upload_1" class="recebe">&nbsp;</div>
   
7.     <button 'upa.php','upload_1','Loading...','Error in upload'); return false;" type="button">test</button>
   
8.   </form>
   
9. </fieldset>

复制代码

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

<fieldset>
<legend>On blur use</legend>
  <form>
    <input type="file" name="name" '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" 'upa.php','upload_3','Loading...','Error in upload')" />
    <div id="upload_3" class="recebe">&nbsp;</div>
    <button type="submit">Go</button>
  </form>
</fieldset>
[/code]
Ok. Bugs, errors, comment here.
In next post, a more flexible version of this function for who understend JavaScript.

Helpful...Thx