Hi..
I am using downloaded code from google
it create frame when we upload image.
i am modified that code ..
I want like when uploaded new image
1> previous image is deleted or new image is overload on previous image in Same frame

but problem is when new image upload it going in old frame i.e. in 0ne frame i got 2 images previous image not deleted. and one new frames creates.
and so on no of images

So how to solve problem??

<?php

sleep(2);
	$ftmp = $_FILES['image']['tmp_name'];
	$oname = $_FILES['image']['name'];
	
	$extenssion = strstr($oname, ".");
	$fname = 'upload/'.$_FILES['image']['name'];
		if(move_uploaded_file($ftmp, $fname)){
			?>
			<html><head><script>
			var par = window.parent.document;
			var images = par.getElementById('images1');
			var imgdiv = images.getElementsByTagName('div')[<?=(int)$_POST['imgnum']?>];
			var image = imgdiv.getElementsByTagName('img')[0];
			
			
			var image_new = par.createElement('img');
			image_new.src = 'resize.php?pic=<?=$oname?>';
			image_new.className = 'loaded';
			
			imgdiv.appendChild(image_new);
			
								
			

			</script></head>
			</html>
			<?php
			
		}	
?><html><head>
<script language="javascript">
function upload(){
	// hide old iframe
	var par = window.parent.document;
	//var num = par.getElementsByTagName('iframe').length - 1;
	var iframe = par.getElementsByTagName('iframe');
	iframe.className = 'hidden';
	
	// create new iframe
	var new_iframe = par.createElement('iframe');
	new_iframe.src = 'upload.php';
	new_iframe.frameBorder = '0';
	par.getElementById('iframe');
	
	// add image progress
	var images = par.getElementById('images1');
	var new_div = par.createElement('div');
	var new_img = par.createElement('images1');
	new_img.src = '/images/indicator.gif';
	new_img.className = 'load';
	new_div.appendChild(new_img);
	
	images.appendChild(new_div);


	//var imgnum = images.getElementsByTagName('div').length - 1;
	//document.iform.imgnum.value = imgnum;
	setTimeout(document.iform.submit(),5000);
	upload();
}
</script>
<style>
#file {
	width: 350px;
}
</style>
<head><body><center>
<form name="iform" action="" method="post" enctype="multipart/form-data">
<input id="file" type="file" name="image" onChange="upload()" />
<input type="hidden" name="imgnum" />
</form>
</center></html>

resize.php

<?php

if($_GET['pic']){
	$img = new img('upload/'.$_GET['pic']);
	$width	=	$_GET["width"];
	$height	=	$_GET["height"];
	$img->resize();
	$img->show();
}

class img {
	
	var $image = '';
	var $temp = '';
	
	function img($sourceFile){
		if(file_exists($sourceFile)){
			$this->image = ImageCreateFromJPEG($sourceFile);
		} else {
			$this->errorHandler();
		}
		return;
	}
	
	function resize($width = 100, $height = 100, $aspectradio = true){
		$o_wd = imagesx($this->image);
		$o_ht = imagesy($this->image);
		if(isset($aspectradio)&&$aspectradio) {
			$w = round($o_wd * $height / $o_ht);
			$h = round($o_ht * $width / $o_wd);
			if(($height-$h)<($width-$w)){
				$width =& $w;
			} else {
				$height =& $h;
			}
		}
		$this->temp = imageCreateTrueColor($width,$height);
		imageCopyResampled($this->temp, $this->image,
		0, 0, 0, 0, $width, $height, $o_wd, $o_ht);
		$this->sync();
		return;
	}
	
	function sync(){
		$this->image =& $this->temp;
		unset($this->temp);
		$this->temp = '';
		return;
	}
	
	function show(){
		$this->_sendHeader();
		ImageJPEG($this->image);
		return;
	}
	
	function _sendHeader(){
		header('Content-Type: image/jpeg');
	}
	
	function errorHandler(){
		echo "error";
		exit();
	}
	
	function store($file){
		ImageJPEG($this->image,$file);
		return;
	}
	
	function watermark($pngImage, $left = 0, $top = 0){
		ImageAlphaBlending($this->image, true);
		$layer = ImageCreateFromPNG($pngImage); 
		$logoW = ImageSX($layer); 
		$logoH = ImageSY($layer); 
		ImageCopy($this->image, $layer, $left, $top, 0, 0, $logoW, $logoH); 
	}
}
?>

Recommended Answers

All 24 Replies

like orkut on change photo when we edit profile.....

so what you want to do is upload an image on to the server so it can be used where it is needed. then if another image is uploaded you want this to be over write the old image and for the new image to be used instead.

yaa...
new image takes place of old image without creating new frame i.e. in same frame....

i would store the image on to the server and save the path to the image into a mysql db. once you have the path to the image inside the db you can use the mysql function to fined the last entry inside the mysql table and only display that where you want.

i will post you the code to upload and store your image onto the server with the code into update the last record inside the mysql db.

i will also give you the code so that you can periodically empty out the folder that is storing all the images on the server.

i am creating this code for uploading image without click on submit button ...
also storing path of image in database....
when edit a profile i want to show that replace new image to old image ...
i think do some changes in script so it resolve problem
how to do that??

here is the code for the upload of the image. your mysql table should have two columns one which is called id which is set to auto increment and the other which is called image.

<?php

			

set_time_limit(0); 
		
$link  =  mysql_connect(localhost, xxxxxxxx, xxxxxxxxx) or die("Could not connect to host.");  //put in your db connection details here
mysql_select_db(xxxxxxx) or die("Could not find database.");  // put your db name in here where the xxxx are
		
		
		
		
 //define a maxim size for the uploaded images
define ("MAX_SIZE","500"); 
// define the width and height for the thumbnail
 // note that theese dimmensions are considered the maximum dimmension and are not fixed, 
 // because we have to keep the image ratio intact or it will be deformed
 define ("WIDTH","150");  //set here the width you want your thumbnail to be
 define ("HEIGHT","120");  //set here the height you want your thumbnail to be.
		
 // this is the function that will create the thumbnail image from the uploaded image
// the resize will be done considering the width and height defined, but without deforming the image
 function make_thumb($img_name,$filename,$new_w,$new_h)
{
//get image extension.
$ext=getExtension($img_name);
//creates the new image using the appropriate function from gd library
if(!strcmp("jpg",$ext) || !strcmp("jpeg",$ext))
$src_img=imagecreatefromjpeg($img_name);
		
if(!strcmp("png",$ext))
$src_img=imagecreatefrompng($img_name);
			
if(!strcmp("gif",$ext))
$src_img=imagecreatefromgif($img_name);
		
//gets the dimmensions of the image
$old_x=imageSX($src_img);
$old_y=imageSY($src_img);
		
 // next we will calculate the new dimmensions for the thumbnail image
// the next steps will be taken: 
// 	1. calculate the ratio by dividing the old dimmensions with the new ones
//	2. if the ratio for the width is higher, the width will remain the one define in WIDTH variable
//		and the height will be calculated so the image ratio will not change
//	3. otherwise we will use the height ratio for the image
// as a result, only one of the dimmensions will be from the fixed ones
$ratio1=$old_x/$new_w;
$ratio2=$old_y/$new_h;
if($ratio1>$ratio2)	{
$thumb_w=$new_w;
$thumb_h=$old_y/$ratio1;
}
else	{
$thumb_h=$new_h;
$thumb_w=$old_x/$ratio2;
}
		
// we create a new image with the new dimmensions
			$dst_img=ImageCreateTrueColor($thumb_w,$thumb_h);
// resize the big image to the new created one
			imagecopyresampled($dst_img,$src_img,0,0,0,0,$thumb_w,$thumb_h,$old_x,$old_y); 
		
// output the created image to the file. Now we will have the thumbnail into the file named by $filename
if(!strcmp("png",$ext))
imagepng($dst_img,$filename); 
else
imagejpeg($dst_img,$filename);
				
if (!strcmp("gif",$ext))
imagegif($dst_img,$filename); 
		
//destroys source and destination images. 
imagedestroy($dst_img); 
imagedestroy($src_img); 
 }
	
 // This function reads the extension of the file. 
 // It is used to determine if the file is an image by checking the extension. 
function getExtension($str) {
 $i = strrpos($str,".");
 if (!$i) { return ""; }
 $l = strlen($str) - $i;
 $ext = substr($str,$i+1,$l);
 return $ext;
 }
 // This variable is used as a flag. The value is initialized with 0 (meaning no error found) 
 //and it will be changed to 1 if an error occures. If the error occures the file will not be uploaded.
 $errors=0;
 // checks if the form has been submitted
 if(isset($_POST['Submit']))
 {
 //reads the name of the file the user submitted for uploading
$image=$_FILES['cons_image']['name'];
// if it is not empty
if ($image) 
{
// get the original name of the file from the clients machine
$filename = stripslashes($_FILES['cons_image']['name']);
				
// get the extension of the file in a lower case format
$extension = getExtension($filename);
$extension = strtolower($extension);
// if it is not a known extension, we will suppose it is an error, print an error message 
//and will not upload the file, otherwise we continue
if (($extension != "jpg")  && ($extension != "jpeg") && ($extension != "png") && ($extension != "gif"))	
{
echo '<h1>Unknown extension!  Please use .gif, .jpg or .png files only.</h1>';
$errors=1;
}
else
{
// get the size of the image in bytes
// $_FILES[\'image\'][\'tmp_name\'] is the temporary filename of the file in which 
//the uploaded file was stored on the server
					$size=getimagesize($_FILES['cons_image']['tmp_name']);
$sizekb=filesize($_FILES['cons_image']['tmp_name']);
		
//compare the size with the maxim size we defined and print error if bigger
if ($sizekb > MAX_SIZE*1024)
{
echo '<h1>You have exceeded the 1MB size limit!</h1>';
$errors=1;
}
		
					
$rand= rand(0, 1000);
//we will give an unique name, for example a random number
$image_name=$rand.'.'.$extension;
//the new name will be containing the full path where will be stored (images folder)
$consname="image/".$image_name;  //change the image/ section to where you would like the original image to be stored
					$consname2="image/thumb".$image_name; //change the image/thumb to where you would like to store the new created thumb nail of the image
$copied = copy($_FILES['cons_image']['tmp_name'], $consname);
$copied = copy($_FILES['cons_image']['tmp_name'], $consname2);
												
$run=mysql_query ('SELECT max(id) from general') or die(mysql_error());
$lastid = mysql_fetch_row($run)or die(mysql_error());
$lastid=$lastid[0]or die(mysql_error());
$sql="UPDATE your table name SET image= '$consname2'  WHERE id= '$lastid'"or die(mysql_error());
$query = mysql_query($sql)or die(mysql_error());
//we verify if the image has been uploaded, and print error instead
if (!$copied) {
echo '<h1>Copy unsuccessfull!</h1>';
$errors=1;
}
else
{
// the new thumbnail image will be placed in images/thumbs/ folder
$thumb_name=$consname2	;
// call the function that will create the thumbnail. The function will get as parameters 
//the image name, the thumbnail name and the width and height desired for the thumbnail
						$thumb=make_thumb($consname,$thumb_name,WIDTH,HEIGHT);
}
}	
}
}
					
 //If no errors registred, print the success message and how the thumbnail image created
if(isset($_POST['Submit']) && !$errors) 
 {
echo "<h5>Thumbnail created Successfully!</h5>";
echo '<img src="'.$thumb_name.'">';
echo $lastid;
}
		 
echo "<form name=\"newad\" method=\"post\" enctype=\"multipart/form-data\"  action=\"\">";
echo "<input type=\"file\" name=\"cons_image\"  >";
echo "<input name=\"Submit\" type=\"submit\"  id=\"image1\" value=\"Upload image\" />";
 echo "</form>";
		 
?>

this code will store your images on the server and store the path into the mysql db.

here is the code to delete all file from the server once you no they are not needed. be careful when this code is used as it will delete every file from within the specified filder in the $dir variable.

$dir = 'your/directory/';
      foreach(glob($dir.'*.*') as $v){
      unlink($v);
      }

as for doing this without the click of a submit but you would have to look at HTTP_REQUEST to upload the images without the click of a submit button. the code for the upload will keep the user on the same page as the upload and once the image is uploaded it will display a thumbnail image of it above the submit button.

to remove the files i would again use a form and save that code on to it own php page and target the page from the action section within the form

how to modified script that means ..
new_div.appendChild(new_img);

it appends with old image ...

any other method that remove older & replace with new??

is that some javascript?

javascript is written in code check that.....

how to modified script that means ..
new_div.appendChild(new_img);

it appends with old image ...

any other method that remove older & replace with new??

It should append a new image if the src of the image is the new one.

If you want to remove the old image first, take a look at removeChild() DOM method.
https://developer.mozilla.org/en/DOM/element.removeChild

call it like:

imgdiv.removeChild(img_div.getElementsByTagName('img')[0]); // remove old image in imgdir
imgdiv.appendChild(image_new);

What browser are you using? When working with the DOM, its really easy when you use Firefox with the Firebug extension.
You can right click on any element on the screen and "inspect" it.
Safari and Google Chrome can also do this, but in my opinion not as well as Firebug.
https://addons.mozilla.org/firefox/addon/1843

Here i am modifying code...
upload.php

<?php


sleep(2);
	$ftmp = $_FILES['image']['tmp_name'];
	$oname = $_FILES['image']['name'];
	
	$extenssion = strstr($oname, ".");
	$fname = 'upload/'.$_FILES['image']['name'];
		if(move_uploaded_file($ftmp, $fname)){
			?>
			<html><head><script>
			var par = window.parent.document;
			var images = par.getElementById('images1');
			var imgdiv = images.getElementsByTagName('div')[<?=(int)$_POST['imgnum']?>];
			var image = imgdiv.getElementsByTagName('img')[0];
			imgdiv.removeChild(image);
			
			var image_new = par.createElement('img');
			image_new.src = 'resize.php?pic=<?=$oname?>';
			image_new.className = 'loaded';
			
			imgdiv.appendChild(image_new);
			
			var bre	=	par.createElement('br');
			imgdiv.appendChild(bre);
			
			

			</script></head>
			</html>
			<?php
			exit();
		}	
?><html><head>
<script language="javascript">
function upload(){
	// hide old iframe
	var par = window.parent.document;
	var num = par.getElementsByTagName('iframe').length - 1;
	var iframe = par.getElementsByTagName('iframe')[num];
	iframe.className = 'hidden';
	
	// create new iframe
	var new_iframe = par.createElement('iframe');
	new_iframe.src = 'upload.php';
	new_iframe.frameBorder = '0';
	par.getElementById('iframe').appendChild(new_iframe);
	
	// add image progress
	var images = par.getElementById('images1');
	var new_div = par.createElement('div');
	var new_img = par.createElement('img');
	new_img.src = '/images/indicator.gif';
	new_img.className = 'load';
	new_div.appendChild(new_img);
	
	images.appendChild(new_div);


	var imgnum = images.getElementsByTagName('div').length - 1;
	document.iform.imgnum.value = imgnum;
	setTimeout(document.iform.submit(),5000);
}
</script>
<style>
#file {
	width: 350px;
}
</style>
<head><body><center>
<form name="iform" action="" method="post" enctype="multipart/form-data">
<input id="file" type="file" name="image" onChange="upload()" />
<input type="hidden" name="imgnum" />
</form>
</center></html>

I got new image in new frame
But not removes first image and frame

Could you post the parent window HTML. :)

Here is all php files
When run this code
I got new image in new frame
But not removes first image and frame

index_image.php

<html>
<head>
<title>image upload </title>
<style>
iframe {border-width: 0px;height: 60px;width: 400px;}
iframe.hidden {visibility: hidden;width:0px;height:0px;}
#main1 {overflow: hidden;margin: auto;width: 90%;height: 420px;border-style: solid;border-width: 1px;background-color: white;}
#images1 {width: 95%;height: auto;margin: 20px;}
#images1 div {margin: 10px;width: 130px;height: 130px;border-style: solid;border-width: 2px;border-color: #DEDFDE;float: left;overflow: hidden;}
#images1 div:hover {border-color: #D8F18C;}
#images1 img.load { margin-top:20px;}
.blacklink:link, .blacklink:alink, .blacklink:vlink, .blacklink:hover{color:#000000}
a.redlink{color: #96001C; text-decoration: none}
a:hover.redlink{color: #96001C; text-decoration: underline}
</style>
</head>
<body>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
	<Tr><td><h1>&nbsp;</h1></td></Tr>
	<Tr>
		<td align="center" valign="middle">
		<div id="main1">
			<div id="iframe">
			
			<iframe src="upload.php" frameborder="0"></iframe>
			</div>
			
			<div id="images1">
			</div>
		
		</div>
		<div id="myDivLink"></div>
		</td>
	</Tr>
    <tr>
    	<Td align="center">&nbsp;
    	</Td>
    </tr>
</table>	
</body>
</html>

upload.php

<?php


sleep(2);
	$ftmp = $_FILES['image']['tmp_name'];
	$oname = $_FILES['image']['name'];
	
	$extenssion = strstr($oname, ".");
	$fname = 'upload/'.$_FILES['image']['name'];
		if(move_uploaded_file($ftmp, $fname)){
			?>
			<html><head><script>
			var par = window.parent.document;
			var images = par.getElementById('images1');
			var imgdiv = images.getElementsByTagName('div')[<?=(int)$_POST['imgnum']?>];
			var image = imgdiv.getElementsByTagName('img')[0];
			imgdiv.removeChild(image);
			
			var image_new = par.createElement('img');
			image_new.src = 'resize.php?pic=<?=$oname?>';
			image_new.className = 'loaded';
			
			imgdiv.appendChild(image_new);
			
				

			</script></head>
			</html>
			<?php
			exit();
		}	
?><html><head>
<script language="javascript">
function upload(){
	// hide old iframe
	var par = window.parent.document;
	var num = par.getElementsByTagName('iframe').length - 1;
	var iframe = par.getElementsByTagName('iframe')[num];
	iframe.className = 'hidden';
	
	// create new iframe
	var new_iframe = par.createElement('iframe');
	new_iframe.src = 'upload.php';
	new_iframe.frameBorder = '0';
	par.getElementById('iframe').appendChild(new_iframe);
	
	// add image progress
	var images = par.getElementById('images1');
	var new_div = par.createElement('div');
	var new_img = par.createElement('img');
	new_img.src = '/images/indicator.gif';
	new_img.className = 'load';
	new_div.appendChild(new_img);
	
	images.appendChild(new_div);
		


	var imgnum = images.getElementsByTagName('div').length - 1;
	document.iform.imgnum.value = imgnum;
	setTimeout(document.iform.submit(),5000);
	
			
			images.removeChild(new_div);
}
</script>
<style>
#file {
	width: 350px;
}
</style>
<head><body><center>
<form name="iform" action="" method="post" enctype="multipart/form-data">
<input id="file" type="file" name="image" onChange="upload()" />
<input type="hidden" name="imgnum" />
</form>
</center></html>

resize.php

<?php

if($_GET['pic']){
	$img = new img('upload/'.$_GET['pic']);
	$width	=	$_GET["width"];
	$height	=	$_GET["height"];
	$img->resize();
	$img->show();
}

class img {
	
	var $image = '';
	var $temp = '';
	
	function img($sourceFile){
		if(file_exists($sourceFile)){
			$this->image = ImageCreateFromJPEG($sourceFile);
		} else {
			$this->errorHandler();
		}
		return;
	}
	
	function resize($width = 100, $height = 100, $aspectradio = true){
		$o_wd = imagesx($this->image);
		$o_ht = imagesy($this->image);
		if(isset($aspectradio)&&$aspectradio) {
			$w = round($o_wd * $height / $o_ht);
			$h = round($o_ht * $width / $o_wd);
			if(($height-$h)<($width-$w)){
				$width =& $w;
			} else {
				$height =& $h;
			}
		}
		$this->temp = imageCreateTrueColor($width,$height);
		imageCopyResampled($this->temp, $this->image,
		0, 0, 0, 0, $width, $height, $o_wd, $o_ht);
		$this->sync();
		return;
	}
	
	function sync(){
		$this->image =& $this->temp;
		unset($this->temp);
		$this->temp = '';
		return;
	}
	
	function show(){
		$this->_sendHeader();
		ImageJPEG($this->image);
		return;
	}
	
	function _sendHeader(){
		header('Content-Type: image/jpeg');
	}
	
	function errorHandler(){
		echo "error";
		exit();
	}
	
	function store($file){
		ImageJPEG($this->image,$file);
		return;
	}
	
	function watermark($pngImage, $left = 0, $top = 0){
		ImageAlphaBlending($this->image, true);
		$layer = ImageCreateFromPNG($pngImage); 
		$logoW = ImageSX($layer); 
		$logoH = ImageSY($layer); 
		ImageCopy($this->image, $layer, $left, $top, 0, 0, $logoW, $logoH); 
	}
}
?>

When run this code
I got new image in new frame
But not removes first image and frame


How to change script / modification so that
in one frame one image and when upload new image new image in old frame and previous image not display..like orkut...edit profile function

i had a problem like this recently where I was trying to give an image preview when the mouse went over a link. I was trying to fill a div that followed the mouse and when I ran over another link it would append another image to the div, not removing the other image. To solve the problem, I used innerHTML because the createElement and removeChild functions would not work as I expected them to.

have the code output an image tag to the div. it will overwrite what is in there.

ex.

obj.innerHTML = '<img src="resize.php?pic=<?=$oname?>" class="loaded" />';

as i am not a javascript expert, i have no idea if this is a proper method to do something like this, but it seems to work.

i had a problem like this recently where I was trying to give an image preview when the mouse went over a link. I was trying to fill a div that followed the mouse and when I ran over another link it would append another image to the div, not removing the other image. To solve the problem, I used innerHTML because the createElement and removeChild functions would not work as I expected them to.

have the code output an image tag to the div. it will overwrite what is in there.

ex.

obj.innerHTML = '<img src="resize.php?pic=<?=$oname?>" class="loaded" />';

as i am not a javascript expert, i have no idea if this is a proper method to do something like this, but it seems to work.

The only thing wrong with innerHTML is that is isn't a standard DOM property. The implementations of innerHTML is different in different browsers also, but this will go unnoticed most the time.

The DOM functions should work also, if used correctly.

An easy way to delete a node is to get a reference to it, then use it's parentNode property to reference its parent, which has the removeChild() property.

example:

child.parentNode.removeChild(child);

This way you only need the child reference and don't have to worry about the parent.

I'd recommend putting some alerts in your code, to see if you are actually deleting the right elements.

If you're using Firefox with Firebug, or A webkit based browser (Safari, Chrome) you can use the console.log() function in place of alert.

eg:

console.log(imgdiv);

This gives a lot more information then alert.

In your code you have:

var imgdiv = images.getElementsByTagName('div')[<?=(int)$_POST['imgnum']?>];

When you have a collection of HTML elements from getElementsByTagName() it behaves like an Array. Using removeChild() on this collection, will remove the Array index for that child. So you can't use <?=(int)$_POST?> since that images would have been removed, the only index would be 0.

I hope that makes sense.

<?php


sleep(2);
	$ftmp = $_FILES['image']['tmp_name'];
	$oname = $_FILES['image']['name'];
	
	$extenssion = strstr($oname, ".");
	$fname = 'upload/'.$_FILES['image']['name'];
		if(move_uploaded_file($ftmp, $fname)){
			?>
			<html><head><script>
			var par = window.parent.document;
			var images = par.getElementById('images1');
			var imgdiv = images.getElementsByTagName('div')[0];
			var image = imgdiv.getElementsByTagName('img')[0];
			imgdiv.removeChild(image);
			
			var image_new = par.createElement('img');
			image_new.src = 'resize.php?pic=<?=$oname?>';
			image_new.className = 'loaded';
			
			imgdiv.appendChild(image_new);
			
				

			</script></head>
			</html>
			<?php
			exit();
		}	
?><html><head>
<script language="javascript">
function upload(){
	// hide old iframe
	var par = window.parent.document;
	//var num = par.getElementsByTagName('iframe').length - 1;
	var iframe = par.getElementsByTagName('iframe')[0];
	iframe.className = 'hidden';
	
	// create new iframe
	var new_iframe = par.createElement('iframe');
	new_iframe.src = 'upload.php';
	new_iframe.frameBorder = '0';
	par.getElementById('iframe').appendChild(new_iframe);
	
	// add image progress
	var images = par.getElementById('images1');
	var new_div = par.createElement('div');
	var new_img = par.createElement('img');
	new_img.src = '/images/indicator.gif';
	new_img.className = 'load';
	new_div.appendChild(new_img);
	
	images.appendChild(new_div);
		


	//var imgnum = images.getElementsByTagName('div').length - 1;
	//document.iform.imgnum.value = imgnum;
	setTimeout(document.iform.submit(),5000);
	
			
			images.removeChild(new_iframe);
}
</script>
<style>
#file {
	width: 350px;
}
</style>
<head><body><center>
<form name="iform" action="" method="post" enctype="multipart/form-data">
<input id="file" type="file" name="image" onChange="upload()" />
<input type="hidden" name="imgnum" />
</form>
</center></html>

here i removes <?=(int)$_POST?> , and write index 0.
as told by digital-ether and got new image in old frame .....

but still new frame is created ....
please tell me how to solve this problem??

<?php


sleep(2);
	$ftmp = $_FILES['image']['tmp_name'];
	$oname = $_FILES['image']['name'];
	
	$extenssion = strstr($oname, ".");
	$fname = 'upload/'.$_FILES['image']['name'];
		if(move_uploaded_file($ftmp, $fname)){
			?>
			<html><head><script>
			var par = window.parent.document;
			var images = par.getElementById('images1');
			var imgdiv = images.getElementsByTagName('div')[0];
			var image = imgdiv.getElementsByTagName('img')[0];
			imgdiv.removeChild(image);
			
			var image_new = par.createElement('img');
			image_new.src = 'resize.php?pic=<?=$oname?>';
			image_new.className = 'loaded';
			
			imgdiv.appendChild(image_new);
			
				

			</script></head>
			</html>
			<?php
			exit();
		}	
?><html><head>
<script language="javascript">
function upload(){
	// hide old iframe
	var par = window.parent.document;
	//var num = par.getElementsByTagName('iframe').length - 1;
	var iframe = par.getElementsByTagName('iframe')[0];
	iframe.className = 'hidden';
	
	// create new iframe
	var new_iframe = par.createElement('iframe');
	new_iframe.src = 'upload.php';
	new_iframe.frameBorder = '0';
	par.getElementById('iframe').appendChild(new_iframe);
	
	// add image progress
	var images = par.getElementById('images1');
	var new_div = par.createElement('div');
	var new_img = par.createElement('img');
	new_img.src = '/images/indicator.gif';
	new_img.className = 'load';
	new_div.appendChild(new_img);
	
	images.appendChild(new_div);
		


	//var imgnum = images.getElementsByTagName('div').length - 1;
	//document.iform.imgnum.value = imgnum;
	setTimeout(document.iform.submit(),5000);
	
			
			images.removeChild(new_iframe);
}
</script>
<style>
#file {
	width: 350px;
}
</style>
<head><body><center>
<form name="iform" action="" method="post" enctype="multipart/form-data">
<input id="file" type="file" name="image" onChange="upload()" />
<input type="hidden" name="imgnum" />
</form>
</center></html>

here i removes <?=(int)$_POST?> , and write index 0.
as told by digital-ether and got new image in old frame .....

but still new frame is created ....
please tell me how to solve this problem??

Hi Aamit,

Are you trying to just replace the new image in the old frame? or create a new frame and put an image in it, then remove the old one?

I think you should try a simple setup, like just:

<div id="images"></div>

<button onclick="addImage()">Add Image</button>

<script>

function addImage() {
// add your code here
}

</script>

Getting your idea across with that would be easier.

My problem definition:-----
when i browse to upload image....
I want image in frame....
for 2nd attempt old image replace with new image...no new frame..it should be in old frame...

for 3 rd attempt old image replace with new ...no new frame...
it should be in old frame....and so on......


Here i got old image replace with new image....
but empty new frame is created for 2nd ,3rd attempt...
so how to remove appended frame from parent or some modification....

so i got correct output for my problem definition...

I don't think this is working: images.removeChild(new_iframe);

In the upload() Javascript function.

Try new_iframe.parentNode.removeChild(new_iframe);

Not working....
only image display.....
browse not display..for upload new image

In FireBug
I Got This For div images-----

<td valign="middle" align="center">
<div id="iframe">
</div>

<div id="images1">
     <div>
      <img src="resize.php?pic=steve.jpeg"/>
      </div>

     <div>
     <img/>  //problem is here
     </div>

    <div>
    <img/>  //problem
    </div>

</div>

when new image uploads a blank

<div>
     <img/>  //problem is here
     </div>

added....

how to solve this??

Mr. Aamit

I think you are taking the long route.
This is actually very simple. I think your need is just to update a pic and it has to be shown there without refreshing the whole page.
Like we do in orkut profile pic.

If so you only have to make an AJAX call
in that call you'll have to upload the new pic and delete the old one
then as response of that call, you make your div (etc) to change
by using

document.getElementById("divID").innerHTML=xmlHttp.responseText;

or
by removing and appending dom elements like digital-ether said.

this will update the old div or something like that with new values.
This would be easier if store the imagepath or name in database (mysql)
I suggest u listen to Kevin Wood

As a conclusion you first store data as kevin said and update the things as per digital-ether link these two by an AJAX call.
I think i made things complicated by exaggerating things. ;)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.