I have a problem after uploading file but the page still show the previous image. I have to refresh the page 2-3 times to make the page show the correct image (new image).
I tried to add these line to the top og the page:
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Sat, 08 Nov 2014 05:00:00 GMT");
I have also tried to change the date to the past. But still not work.
In the .htaccess i have also put :
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType image/x-icon "access plus 604800 seconds"
ExpiresByType image/jpeg "access plus 604800 seconds"
ExpiresByType image/png "access plus 604800 seconds"
ExpiresByType image/gif "access plus 604800 seconds"
ExpiresByType application/x-shockwave-flash "access plus 604800 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 604800 seconds"
ExpiresByType application/x-javascript "access plus 604800 seconds"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"
</IfModule>
Nothing help, the page still perform the same thing. I have to refresh the page 2-3 times every time i uploaded new image.
What should I do ?
UPDATE
Some PHP lines (I have lots more but to be easy to see i just post the important lines)
$photo=$_FILES['photoA']['tmp_name'];
$photo_name=$_FILES['photoA']['name'];
$photo_size=$_FILES['photoA']['size'];
$photo_type=$_FILES['photoA']['type'];
$uid=$_POST['uid'];
$ext = strtolower(end(explode('.', $photo_name)));
if ($ext == "jpg" or $ext == "jpeg" or $ext=="gif" or $ext=="png") {
$filename=$uid.".".$ext;
copy($photo,"myfolder/$filename");
}
}
///in my index.php (After fetch sql)
if ($row['user_img'] !="" ){
echo"<div id='userimg_cont' style='background-image: url(../myfolder/$row[user_img]);'>
}
Not sure if it helps, but this is our method to check browser's cache timing of a user's avatar and if the file was modified, we force the browser to revalidate. Else, returns 304 not modified.
$request_headers = apache_request_headers();
$avatar = 'path/to/user/avatar';
$last_modified = xx; //last modified time of our avatar file
$last_modified_str = gmdate("D, d M Y H:i:s", $last_modified).' UTC';
//Not outdate
if (isset($request_headers['If-Modified-Since']) && strtotime($request_headers['If-Modified-Since']) === $last_modified) {
header('Last-Modified: '.$last_modified_str, true, 304);
//else, outdated
}else{
$info = getimagesize($avatar);
$mime = $info['mime'];
header('Last-Modified: '.$last_modified_str, true, 200);
header('Content-Type: '.$mime);
header('Cache-Control: public, max-age=300');
header('Date: '.gmdate("D, d M Y H:i:s e", time()));
header('Expires: '.gmdate("D, d M Y H:i:s e", time()+300));
header('Content-Disposition: inline; filename="avatar-'.$id.'.jpg"');
readfile($avatar);
}
And why max-age=300
? This is taken from gravatar's caching mechanism. We believe they have their reason to do so :)
EDIT
Another way, dummy proof way, is probably using version, as in, every time the user upload the image, you append the path with ?v=some_version_string
to force browser to re-download the file.
One way of doing it is probably using $the_url_of_the_image.'?v='.filemtime($the_image_path)
.
EDIT 2
One thing I have to point is your code is very prone to attack, but this is not the topic here. Anyway, try this:
if ($row['user_img'] != ""){
$fmtime = filemtime("myfolder/$row['user_img']");
echo "<div id='userimg_cont' style='background-image: url(../myfolder/{$row['user_img']}?v={$fmtime});'>
}
I don't know where do you store your images so I assume it's in "myfolder/$row['user_img']"
.
If you need it for your own testing purposes, you can use console in google chrome and check the element here:
This will disable cache for you (you do not need to refresh 2-3 times) at any time, when the console is open.