Refresh iamge after upload using ajax?!

JavaScript
1

I have a script which allow users to chnage there profile image, and it allmost works perfect. The script is set up so when a user uploads a new picture it overrides the previous one, so if a user have an ID, lets say 15, the image would be called 15.jpg. The problem is that when an new upload is finished it still shows the old image, I think by cache, and thats no good. How do I refresh the image with ajax so when the script has done uploading the image is the new one?

The javascript upload.js:

<!--
function startUpload(){
	document.getElementById('f1_userimage').style.visibility = 'hidden';
	document.getElementById('f1_upload_process').style.visibility = 'visible';
	document.getElementById('f1_upload_form').style.visibility = 'hidden';
	return true;
}

function stopUpload(success){
	  var result = ''; 
	  if (success == 1){
		 result = '<span class="msgSuccess">File upload succes!</span><br><br/>';
		 document.getElementById('f1_userimage').innerHTML = '<img src="profileimages/<?=$userid;?>.jpg">';
		 document.getElementById('f1_upload_form').innerHTML = result + 'Image: <input type="file" name="file" id="file" class="input_field"><br><br><input type="submit" name="new" id="new" value="Upload" class="red150btn">';
		 document.getElementById('f1_upload_form').style.visibility = 'visible';
		 document.getElementById('f1_userimage').style.visibility = 'visible';
	  }
	  else if (success == 2){
		 result = '<span class="msg">Image not jpg!<\\/span><br/><br/>';
		 document.getElementById('f1_userimage').innerHTML = '<img src="upload_user_error_150.png">';
		 document.getElementById('f1_upload_form').innerHTML = result + 'Image: <input type="file" name="file" id="file" class="input_field"><br><br><input type="submit" name="new" id="new" value="Upload" class="red150btn">';
		 document.getElementById('f1_upload_form').style.visibility = 'visible';
		 document.getElementById('f1_userimage').style.visibility = 'visible';
	  }
	  
	  document.getElementById('f1_upload_process').style.visibility = 'hidden';
	  return true;   
}
//-->

index.php

<script language="javascript" src="upload.js">

<center>
	
<div id="uploadcontainer">
	<div id="uploadcontent">
	
    <?		
	$sql = "SELECT * FROM ".$prefix."_users WHERE new_userid = '$userid'";
	$result = mysql_query($sql);
	$row = mysql_fetch_array($result);
	
	echo '<div id="f1_userimage">';
	
	if(!$row['img_small']){
		echo '<img src="images/no_userimg_big.png" width="150px" height="150px">';
	} else {
		echo '<img src="profileimages/'.$userid.'.jpg">';
	}
	
	echo '</div>';
	
	?>
			
    <form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="startUpload();" >
    <p id="f1_upload_process">Uploading!<br><br><img src="myloader.gif" /><br/></p>
    <p id="f1_upload_form" align="center"><br/>';
					 
	Image: <input type="file" name="file" id="file" class="input_field"><br><br>
	<input type="submit" name="new" id="new" value="'._CHANGE_IMAGE.'" class="red150btn">';
                     
	</p>
                     
    <iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
    </form>
    </div>
</div>
		 
</center>

upload.php


<?
$result = 0;
			
$imagename = $_FILES['file']['name'];
          
function findexts ($imagename){ 
  $imagename = strtolower($imagename) ; 
  $exts = split("[/\\\\.]", $imagename) ; 
  $n = count($exts)-1; 
  $exts = $exts[$n]; 
  return $exts; 
}

$ext = findexts ($_FILES['file']['name']);

$ext = strtolower($ext);

if ($ext != 'jpg'){
    $result = 2;
} else {

	$imagename = $userid.'.'.$ext;
    
    $source = $_FILES['file']['tmp_name'];
    $target = "profileimages/".$imagename;
    if(@move_uploaded_file($source, $target)){
        $result = 1;
    }
    
    $imagepath = $imagename;
    $save = "profileimages/" . $imagepath; //This is the new file you saving
    $file = "profileimages/" . $imagepath; //This is the original file

    list($width, $height) = getimagesize($file) ; 

    $modwidth = 640; 

    $diff = $width / $modwidth;

    $modheight = $height / $diff; 
    $tn = imagecreatetruecolor($modwidth, $modheight) ; 
    $image = imagecreatefromjpeg($file) ; 
    imagecopyresampled($tn, $image, 0, 0, 0, 0, $modwidth, $modheight, $width, $height) ; 

    imagejpeg($tn, $save, 100) ; 
    chmod($save, 0777);
        
    $sqlimage = 'profileimages/'.$userid.'.jpg';
            
    $result = $db->sql_query("UPDATE ".$prefix."_users SET img_small='$sqlimage' WHERE new_userid='$userid'");

    sleep(1);
    
}

?>
<script language="javascript" type="text/javascript">window.top.window.stopUpload(<?php echo $result; ?>);</script>

Thanks in advance…

2

hi you can do this this way:

find image element

<img src="profileimages/15.jpg" id="user_image">


var el = document.getElementById('user_image');
el.setAttribute('src', el.getAttribute('src') + '?m='+Math.random());

this should probably work, i didn’t test it