refresh image on upload - php

Question

I have a script which uploads an image to the server under the id of the user. To change teh picture the first gets overwritten. The problem is that the old picture, with the dimensions of the new one, shows for a while until they refresh their browser. How can I prevent this from happening?
Script:
function uploadProfilePicture($memberID,$extension)
{
##### FIND ERRORS #####
$error = "";
// check if larger than 5mb
$avatar = $_FILES['uploadedAvatar'];
if( $avatar["size"] > 5000000 ){ //5mb
$error = SETTINGSphoto_less_5meg;
}
//check if member selected a photo
if( $avatar['name'] == "" ){
$error = SETTINGSphoto_no_upload;
}
//check if photo is of allowed formats
if( $avatar["type"] != "image/png" ){
if( $avatar["type"] != "image/gif" ){
if( $avatar["type"] != "image/jpg" ){
if( $avatar["type"] != "image/jpeg" ){
if( $avatar["type"] != "image/pjpeg" ){
$error = SETTINGSphoto_file_type;
}
}
}
}
}
#### END FIND ERRORS #####
##### DISPLAYS ERRORS ######
if( $error != ""){
echo '<span style="background-color:#E05641;" class="pint2">'.$error.'</span>';
##### END DISPLAYS ERRORS ######
##### PROCESS THUMBNAIL AND UPLOAD PICTURE #####
}else{
$ext = substr($avatar["name"], -4); //take off extention.
$fileName = $memberID.$extension.$ext; // rename picture with member's ID.w
unlink("photos/".$memberID.$extension.".jpg");
unlink("photos/".$memberID.$extension."Thumb.jpg");
copy($avatar['tmp_name'], "photos/".$fileName); //upload temp
//create virual image
if(preg_match('/[.](jpg)$/',strtolower($avatar["name"]))) {
$im = imagecreatefromjpeg("photos/".$fileName);
} else if (preg_match('/[.](gif)$/', strtolower($avatar["name"]))) {
$im = imagecreatefromgif("photos/".$fileName);
} else if (preg_match('/[.](png)$/', strtolower($avatar["name"]))) {
$im = imagecreatefrompng("photos/".$fileName);
} else if (preg_match('/[.](jpeg)$/',strtolower($avatar["name"]))) {
$im = imagecreatefromjpeg("photos/".$fileName);
}else{
$im = imagecreatefromjpeg("photos/".$fileName);
}
//get height and width
$ox = imagesx($im); $oy = imagesy($im);
$final_width_of_image = 200;
$final_height_of_image = 200;
//$ratio = $final_width_of_image / $ox; //find ratio to apply to height
//$nx = $final_width_of_image; $ny = $oy * $ratio;
if( $ox < $oy ){
$nx = 200;
$ny = floor($oy * (200 / $ox));
}else{
$ny = 200;
$nx = floor($ox * (200 / $oy));
}
//$nm = imagecreatetruecolor($nx, $ny);
//imagecopyresampled($nm, $im, 0,0,0,0,$nx,$ny,$ox,$oy); //create new pic
$nm = imagecreatetruecolor($nx, $ny);
imagecopyresampled($nm, $im, 0,0,0,0,$nx,$ny,$ox,$oy);
unlink("photos/".$fileName); //delete temp image
imagejpeg($nm, "photos/".$memberID.$extension.".jpg",100); //save image // 100 = quality
$im = imagecreatefromjpeg("photos/".$memberID.$extension.".jpg");
$nm = imagecreatetruecolor(200, 200);
imagecopyresampled($nm, $im,0,0,0,0,200,200,200,200);
imagejpeg($nm, "photos/".$memberID.$extension."Thumb.jpg",100);
$sql = "UPDATE exchange SET photo = 1 WHERE id = '$memberID'"; //update db
$mysql = new mysql();
$mysql->query($sql);
##### END PROCESS THUMBNAIL AND UPLOAD PICTURE #####
echo '<span class="pint2">'.SETTINGSphoto_chage_success.' <a style="color:#ffffff" href="'.$_ENV['rootURL'].'/'.( in_array($_GET['lang'],$_ENV['supportedLanguages']) ? $_GET['lang']."/" : $nothing).HEADlanguage_exchange.'/id/'.$memberID.'">'.SETTINGSphoto_view_profile.'</a></span>';
}
}

Answer 1

The problem is that the old picture, with the dimensions of the new one, shows for a while until they refresh their browser. How can I prevent this from happening?
You can solve this by telling the user she should clear the browser cache.
If that is not an option, you want to actually prevent the user to cache the image.
So you need to make a difference between each revision of the image. Add a integer field to your database you store the revision number of the image. Then each time you output the user's image, fetch the actual revision number from the database as well. Add it as the query-info-part of the image URL:
<img src="avatars/user/929292/photo.jpg?revision">
^^^^^^^^
The browser will still cache profile pictures but you make him aware of the revision, so a specific revision is cached.
Old avatar picture:
<img src="avatars/user/929292/photo.jpg?1">
Then the user uploads a new image, you increment the revision field, the new avatar image is:
<img src="avatars/user/929292/photo.jpg?2">
If the revision changes, the browser notices that and will pick the image from the server.

Answer 2

You could give the new image a slightly different filename, so the browser loads the new image rather than using the old cached one.

Answer 3

In your PHP code for the image source you can append a timestamp to force the photo to always appear as a new photo. Throw some logic in to only do this for updated records and you'll be more cache friendly.
<img src="your_profile_url.jpg?<?= time(); ?>"/>