For that use following code for uplaoding image, there are 3 files to make this clear.
1.index.php
<!–
/* This scipt uses webtoolkit.js for Frame and aJAx style upload */
–>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en-US” lang=”en-US”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Iframe Ajax for Upload</title>
<script type=”text/javascript” src=”webtoolkit.js”></script>
<script type=”text/javascript”>
function startCallback() {
// make something useful before submit (onStart)
return true;
}
function completeCallback(response) {
// make something useful after (onComplete)
var src_path =response;
//alert(response);
var img_obj =document.getElementById(‘img_div’);
var newimg=document.createElement(‘img’);
img_obj.appendChild(newimg);
newimg.src = src_path;
newimg.onload=function()
{ // get an image width and hieght
new_w = img_obj.getElementsByTagName(‘img’)[0].width;
new_h =img_obj.getElementsByTagName(‘img’)[0].height;
if(new_w>100) //make neccessary validation depends on width adn hight
{
var ret = “<?php posting1(‘”+response+”‘);?>”;
alert(ret);
}
//remove the image from disp location here
img_obj.removeChild(newimg);
}
}
</script>
</head>
<body>
<form action=”my_upload.php” method=”post” onsubmit=”return AIM.submit(this, {‘onStart’ : startCallback, ‘onComplete’ : completeCallback})” enctype=”multipart/form-data”>
<div><label>Name:</label> <input type=”text” name=”form[name]” /></div>
<div><label>File:</label> <input type=”file” name=”form[file]” /></div>
<div><input type=”submit” value=”SUBMIT” /></div>
</form>
<hr/>
<div id=”img_div”></div>
</body>
</html>
<?php
function posting1($ret)
{
echo “code for update database and remove image for the same”.$ret;
}
?>
2.my_upload.php
<!–
/* In this page we can make upload logic by using php code */
–>
<?php
$fname = $_FILES['form']['name']['file'];
$uploaded_path = “”.$fname; ///var/www/html/demo/test/my_upload/
$ftname = $_FILES['form']['tmp_name']['file'];
if(move_uploaded_file($ftname,$uploaded_path))
$ret = $uploaded_path;
else $ret = $uploaded_path;
//$ret =”http://localhost:100/demo/test/”.$fname;
$disp_path =$fname;
echo $disp_path;
?>
3.webtoolkit.js
/**
*
* AJAX IFRAME METHOD (AIM)
* http://www.webtoolkit.info/
**/
AIM = {
frame : function(c) {
var n = ‘f’ + Math.floor(Math.random() * 99999);
var d = document.createElement(‘DIV’);
d.innerHTML = ‘<iframe style=”display:none” src=”about:blank” id=”‘+n+’” name=”‘+n+’” onload=”AIM.loaded(\”+n+’\')”></iframe>’;
document.body.appendChild(d);
var i = document.getElementById(n);
if (c && typeof(c.onComplete) == ‘function’) {
i.onComplete = c.onComplete;
}
return n;
},
form : function(f, name) {
f.setAttribute(‘target’, name);
},
submit : function(f, c) {
AIM.form(f, AIM.frame(c));
if (c && typeof(c.onStart) == ‘function’) {
return c.onStart();
} else {
return true;
}
},
loaded : function(id) {
var i = document.getElementById(id);
if (i.contentDocument) {
var d = i.contentDocument;
} else if (i.contentWindow) {
var d = i.contentWindow.document;
} else {
var d = window.frames[id].document;
}
if (d.location.href == “about:blank”) {
return;
}
if (typeof(i.onComplete) == ‘function’) {
i.onComplete(d.body.innerHTML);
}
}
}
