2010-06-29 6 views
14

Ich habe eine Liste von Elementen, die auch eine Miniaturansicht enthält. Manchmal muss ich das Miniaturbild ändern, aber den Dateinamen beibehalten. Gibt es eine Möglichkeit, den Browser zu zwingen, das neu hochgeladene Bild herunterzuladen, statt eines aus dem Browser-Cache zu holen?Wie lösche ich den Browser-Cache, wenn ich ein Bild mit demselben Dateinamen in php hochlade?

Dies ist sehr relevant, wenn Leute ihre Avatare aktualisieren, was Verwirrung für einige Benutzer verursacht, die ihren alten Avatar immer wieder sehen, bis sie den Browser-Cache löschen oder den Browser neu starten.

Antwort

2

Sie können den Cache für eine ganze Seite ungültig machen, indem die headers Änderung:

<?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 
?> 
+2

Dies wird leider das Zwischenspeichern der Datei unmöglich machen, wodurch die Seitenladezeit und die Bandbreitenkosten erhöht werden. –

+3

Dann nur nach einem Upload tun? –

1

Wenn das Bild aussendet, stellen Sie sicher, keine Expires Header zu senden. Ziehen Sie auch in Betracht, diesen Cache-Header zu senden:

Cache-Control: must-revalidate 

Dadurch wird der Browser Ihr Server jedes Mal nach dem Bild fragen. Achten Sie auf einen If-Modified-Since-Header in der Anfrage. Wenn das Bild nicht geändert wird, antworten Sie mit einem 304 HTTP-Code.

Diese ganze Prozedur (muss-revalidate, If-Modified-Since, 304 antwort) wird es dem Browser ermöglichen, den Bildinhalt zwischenzuspeichern, aber gleichzeitig Ihren Server fragen, ob sich die Datei geändert hat.


Ein weiterer, vielleicht einfacher, ist Lösung lediglich einen Expires Header eine kurze Zeit in der Zukunft, beispielsweise zehn Minuten eingestellt, und die Benutzer der 10 Minuten Verzögerung. Dies beschleunigt die meisten Seitenladevorgänge, da keine HTTP-Anforderung für das Bild erforderlich ist.

+0

Was meinen Sie mit "beim Senden des Bildes"? Nachdem ich ein Bild hochgeladen habe und Kopfzeile verwende ("Location: whatever.php"); ? –

+0

Nein, ich meine, wenn jemand die Image-Datei anfordert, d. H. Eine HTTP-Anfrage für /example/image.jpg –

5

Sie können die Änderungszeit der Datei:

<? 

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

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

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

?> 

wenn die Datei geändert wird, wird die Client-Cache

+0

Nicht möglich in vielen Fällen aufgrund der Cache-Art von HTML-Code. –

+0

kann mir sagen, welche Fälle? – Leo

+0

Wo ein Cache generiert HTML-Code in der DB, die alle paar Tage einmal aktualisiert wird –

25

anhängen eine eindeutige Nummer an das Ende des Bildes src

dh löschen

<?php 

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

tun dies nur auf dem Formular für die Aktualisierung Avatar

Werke für mich

btw, diese zu zwingen, Updates von anderen statischen Dateien

dh html für CSS-Dateien gut funktioniert, ist

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

Beachten Sie, dass die Berechnung von MD5 viel Rechenleistung erfordert. Es wäre besser, 'filemtime()' zu verwenden. – oriadam

0

Cached Bilder werden auch auf manuelle Aktualisierung der Seite für ungültig erklärt (Drücken Sie F5 im Browser). Dies kann mit der JavaScript-Methode location.reload() simuliert werden, die bei Body Load ausgelöst wird. Um ein fortwährendes Umladen zu vermeiden, darf dies nur einmal geschehen. Wenn der Benutzer einen neuen Avatar hochlädt, wird die ReloadPending-Anforderung dauerhaft in seiner Sitzung festgelegt und nach der Beantwortung zurückgesetzt.

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

die ganze Seite nach Avatar Upload Nachladen wird die Seite Flimmern verursachen, aber dies geschieht nur einmal, was, glaube ich, ist akzeptabel.

0

Ich fand heraus, dass einer der besten Wege, dies zu tun ist, mit der gleichen URL zum Abrufen und Posten eines Bildes (REST).

POST/my/Bild (Cache-control: no-cache, Must-revalidate)

GET/my/Bild (Cache-control: Must-revalidate)

Verwandte Themen