Hi,
I am getting some problem to upload Multiple Images through AJAX. When I tried to upload images without using the page refresh on PHP site the images contents are not loading. Something is wrong between AJAX file and I dont know that how send images on the PHP side. Can any one help me?
My actual coding is as follow:
----------------images.php-----------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Images</title>
<script src="js/ajax.js" type="text/javascript"></script>
<script type="text/javascript">
function addElement()
{
var actnum=document.getElementById("theValue");
var num=(document.getElementById("theValue").value-1)+2;
actnum.value=num;
if (num<=10)
{
var d=document.getElementById("contact_form");
var newDiv=document.createElement("div");
var newValue="div"+num;
newDiv.setAttribute("Id",newValue);
var newFile='<input type="file" name="images[]" id="images'+num+'" />';
var newButton='<input type="button" name="'+ newValue +'" id="bImg'+num+'" value="Remove Image'+num+'" onclick=\'removeElement(this.name)\'>';
newDiv.innerHTML="Select Image : " + newFile + newButton;
d.appendChild(newDiv);
}
}
function removeElement(str)
{
var m=document.getElementById("contact_form");
var k=document.getElementById(str);
m.removeChild(k);
}
window.onload=addElement;
</script>
</head>
<body>
<form enctype="multipart/form-data" method="post" >
<div id="contact_form">
<input type="hidden" value="0" name="theValue" id="theValue" />
<a href="#" onclick="addElement()">Add more Images</a>
<input type="button" value="Upload" name="upload" id="upload" onclick="RecordSave()" />
</div>
</form>
<div id="result">
</div>
</body>
</html>
-------------------AJAX.JS-------------------------------------
var xmlhttp;
function GetXMLHttpObject()
{
try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) {} //IE
try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} //IE
try { return new XMLHttpRequest(); } catch(e) {} //Native Javascript
alert("XMLHttpRequest not supported");
return null;
}
function RecordSave()
{
var counter=document.getElementById("theValue").value;
counter=counter-1;
var file=new Array();
var i;
for (i=0; i<=counter; i++)
{
file=document.getElementById("images"+(i+1)).value;
}
xmlhttp=GetXMLHttpObject();
if (xmlhttp==null)
{
alert("Your Browser deos not Support XMLHTTP");
}
else
{
for (i=0; i<=counter; i++)
{
var url="images_save.php";
url=url + "?upload="+file;
url=url + "&sid=" + Math.random();
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
xmlhttp.onreadystatechange=stateChangedUser;
}
}
}
function stateChangedUser()
{
if (xmlhttp.readyState==4 )
{
document.getElementById("result").innerHTML=xmlhttp.responseText;
}
}
---------------------------images_save.php-----------------------------
<?php
while(list($key,$value) = each($_FILES[images][name]))
{
if(!empty($value))// this will check if any blank field is entered
{
$allowed=array("jpeg","png","gif","text/plain");
$fileType = $_FILES[images][type][$key];
if (!in_array($fileType,$allowed))
{echo "Invalid File Type"; exit();}
if (!file_exists("./UploadImages"))
{ mkdir("./UploadImages") ;}
$targetPath="./UploadImages/";
$fileName = $value; // filename stores the value
$tmpName=$_FILES[images][tmp_name][$key];
$fileSize=$_FILES[images][size][$key];
$ext=substr(strchr($fileName,"."),1);
$ext=substr(strchr($fileName,"."),1);
$imageName=md5(rand()*time());
$targetPath=$targetPath . $imageName . ".". $ext;
move_uploaded_file($tmpName,$targetPath);
chmod("$targetPath",0777); // set permission to the file.
$con=mysql_connect("localhost","root","elephant");
mysql_select_db("my_db",$con);
echo "<br>". $fileName ."<br>";
echo "<br>". $imageName ."<br>";
echo "<br>". $fileType ."<br>";
echo "<br>". $fileSize ."<br>";
echo "<br>". $targetPath ."<br>";
$query="insert into upload2 (fileName,fileType,fileSize,filePath) values('$imageName','$fileType','$fileSize','$targetPath')";
if (!mysql_query($query))
{echo mysql_error();}
mysql_close($con);
}
}
?>
