How to clear browser cache when re-uploading image with same filename, in php?
I have a listing of items, that also contains an image thumbnail. Sometimes I need to change the thumbnail image, but keep the filename the same. Is there a way to force the browser to download the newly uploaded image, instead of grabbing one fr开发者_C百科om the browser cache?
This is very pertinent when people update their avatars, which causes confusion for some users, who keep seeing their old avatar, until they clear the browser cache, or restart the browser.
Append a unique number to the end of the image src
ie
<?php
echo "<img src=../thumbnail.jpg?" . time() . ">";
do this only on the form for the updating avatar
works for me
btw, this works well for forcing updates of other static files
i.e. html for css files is
<link rel="Stylesheet" href="../css/cssfile.css?<?= md5_file('cssfile.css'); ?>" />
You can use the modification time of file:
<?
$filename = 'avatar.jpg';
$filemtime = filemtime($filename);
echo "<img src='".$filename."?".$filemtime."'>";
//result: <img src='avatar.jpg?1269538749'>
?>
when the file is modified will clear the client cache
You can invalidate the cache for an entire page by altering the headers:
<?php
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past
?>
Cached images are also invalidated on manual page refresh (pressing F5 in browser). This can be simulated with Javascript method location.reload() being fired on body load. To avoid perpetual reloading, this may take place only once. When the user uploads a new avatar, the ReloadPending request is set persistently in his/her session and it is reset when it's been answered.
<?php
if ($session['ReloadPending'])
{ $session['ReloadPending']=false;
echo "<body onload='location.reload(true);'>";
} else echo "<body>";
?>
Reloading the whole page after avatar upload will cause the page flicker but this happens only once, which, I believe, is acceptable.
When sending out the image, make sure not to send any Expires header. Also consider sending this cache header:
Cache-Control: must-revalidate
This will make the browser ask your server for the image every time. Watch for an If-Modified-Since header in the request; if the image is not modified, answer with an 304 HTTP code.
This whole procedure (must-revalidate, If-Modified-Since, 304 answer) will make it possible for the browser to cache the image content but at the same time ask your server if the file has changed.
Another, maybe simpler, solution is to only set an Expires header a short time in the future, for example ten minutes, and inform the user of the ten minute delay. This will speed up most page loads since there's no need to do any HTTP request for the image at all.
Please use these rules in your .htaccess file.
I used these rules and solved my problem related to image re-uploading with the same file name.
# BEGIN Caching
<ifModule mod_headers.c>
<filesMatch "\\.(ico|pdf|flv|jpg|jpeg|png|gif|swf|ttf|otf|woff|woff2|eot|svg)$">
Header set Cache-Control "max-age=0, public"
</filesMatch>
<filesMatch "\\.(css)$">
Header set Cache-Control "max-age=604800, public"
</filesMatch>
<filesMatch "\\.(js)$">
Header set Cache-Control "max-age=216000, private"
</filesMatch>
<filesMatch "\\.(xml|txt)$">
Header set Cache-Control "max-age=216000, public, must-revalidate"
</filesMatch>
<filesMatch "\\.(html|htm|php)$">
Header set Cache-Control "max-age=1, private, must-revalidate"
</filesMatch>
</ifModule>
# END Caching
I found out that one of the best ways to do this is by having the same URL for getting and posting an image (REST).
POST /my/image (Cache-control: no-cache, must-revalidate)
GET /my/image (Cache-control: must-revalidate)
You can add last modified date to you image or simply add date and time at the end of you image URL
for Example
$today=date('Y-m-d H:i');
<img class="img-circle pro_pic" src="https://govcard.net/yourimage.jpg?lm=<?php echo $today?>" alt="">
after .jpg add date and time like this. hope this will help you.
加载中,请稍侯......
精彩评论