Home > Ajax, Javascript, Multimedia, PHP > Image Upload With Ajax

Image Upload With Ajax

November 1st, 2009

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

I just need this script fixed so it uploads both the image and some text from the same form

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>

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);
}
}


Image Upload With Ajax

Comments are closed.
Bear