Upload image with ajax

[dreamwest]

This javascript works with text POST but it wont upload an image

 

ajax.js

	var object_busy= false;
ShowLoading = 1 ; 
var MyTimer = null;

Myvar = "<table  align='center'><tr><td><img src='/ajax-loading.gif' ></td></tr></table>";

function RequireAjaxData($Request, $Control) {
	if ($Control == "" || $Control == null)	{alert ("No output specified !"); return;}
	var ai = new AJAXInteraction($Request, GetServerData,  $Control );
  ai.doGet();
}

   function RequireAjaxData_post($Request, $Control) {
      if ($Control == "" || $Control == null)   {alert ("No output specified !"); return;}
      var ai = new AJAXInteraction($Request, GetServerData,  $Control );
     ai.doPost("sendForm");
   }

function GetServerData  ($TheData, $Control){
	document.getElementById($Control).innerHTML = $TheData;
}

function AJAXInteraction(url, callback, $Control) {
   	var req = init();
    req.onreadystatechange = processRequest;
        
    	function init() {
		if	(window.XMLHttpRequest)		{	return new XMLHttpRequest();					} 
		else if (window.ActiveXObject)	{	return new ActiveXObject("Microsoft.XMLHTTP");  }
		else {alert ("Your browser seems to be out of date, Please update!"); return;		}
    }
    
    	function processRequest () {
		if (req.readyState == 4) {
	        if (req.status == 200) callback(req.responseText, $Control);
		}
		else	callback(Myvar , $Control);
    }
	this.doGet = function() {
      req.open("GET", url, true);
    	  req.send(null);
    }
    
     this.processForm = function (formID) {
     var tmp = new Array();
	 var n, form;

	 form = document.getElementById(formID);

	 for (n=0;n<form.length;n++)
	      tmp.push(encodeURI(form.elements[n].name) + "=" + encodeURI(form.elements[n].value));
         
	 return tmp.join("&");
   }
   
     
       this.doPost = function(formID) {
         var body = this.processForm(formID);
         req.open("POST", url, true);
         req.setRequestHeader("Content-Type", "multipart/form-data");
         req.send(body);
	 }
   }  

 

form.htm:

<form id="sendForm" action="" method="post" onsubmit='RequireAjaxData_post("/red_upload.php", "RED_UPLOAD"); return false;'>
<nobr>
Nickname: <INPUT type="text" maxLength=60 name="nick" value="" size="30" >
<INPUT type="file" name="redhot" size="30">
<input type="hidden" name="MAX_FILE_SIZE" value="30000" />
<input type="submit" name="upload" value="Upload" ><input type="reset" value="Reset">
</form>
</nobr>
<div id='RED_UPLOAD'></div>

[abazoskib]

you need this in your form tag:

 

enctype="multipart/form-data"