在php中重新上传具有相同文件名的图像时如何清除浏览器缓存?

问题描述 投票:16回答:7

我有一个项目清单,其中还包含图像缩略图。有时我需要更改缩略图图像,但文件名保持不变。有没有一种方法可以强制浏览器下载新上传的图像,而不是从浏览器缓存中获取图像?

这在人们更新他们的化身时非常相关,这会引起一些用户的困惑,他们一直看到他们的旧化身,直到清除浏览器缓存或重新启动浏览器为止。

php browser-cache
7个回答
27
投票

将唯一编号附加到图像src的末尾

ie

<?php

echo "<img src=../thumbnail.jpg?" . time() . ">";

仅在用于更新头像的表单上执行此操作

为我工作

btw,这对于强制更新其他静态文件非常有效

即CSS文件的html是

<link rel="Stylesheet" href="../css/cssfile.css?<?= md5_file('cssfile.css'); ?>" /> 

6
投票

您可以使用文件的修改时间:

<?

$filename = 'avatar.jpg';
$filemtime = filemtime($filename);

echo "<img src='".$filename."?".$filemtime."'>";

//result: <img src='avatar.jpg?1269538749'>

?>

修改文件时将清除客户端缓存


2
投票

您可以通过更改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
?>

1
投票

发送图像时,请确保不发送任何Expires标头。还可以考虑发送此缓存头:

Cache-Control: must-revalidate

这会使浏览器每次向您的服务器询问图像。注意请求中的If-Modified-Since标头;如果图像未修改,请提供304 HTTP代码。

整个过程(必须重新验证,If-Modified-Since,304回答)将使浏览器可以缓存图像内容,但同时询问您的服务器文件是否已更改。


另一种,可能更简单的解决方案是仅将Expires标头设置为[[将来的短时间,例如十分钟,然后将十分钟的延迟通知用户。这将加快大多数页面的加载速度,因为根本不需要对图像进行任何HTTP请求。


1
投票
缓存的图像在手动刷新页面时也会无效(在浏览器中按F5键)。这可以通过在身体负荷时触发Javascript方法location.reload()来模拟。为避免永久重新加载,此操作只能进行一次。当用户上传新的头像时,ReloadPending请求将在其会话中永久设置,并在得到答复后重置。

<?php if ($session['ReloadPending']) { $session['ReloadPending']=false; echo "<body onload='location.reload(true);'>"; } else echo "<body>"; ?>

上传头像后重新加载整个页面将导致页面闪烁,但这仅发生一次,我相信这是可以接受的。

0
投票
我发现最好的方法之一是使用相同的URL来获取和发布图像(REST)。

POST / my / image(缓存控制:无缓存,必须重新验证)

获取/我/图像(缓存控制:必须重新验证)


0
投票
//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
© www.soinside.com 2019 - 2024. All rights reserved.