web-dev-qa-db-ja.com

PHPで同じファイル名の画像を再アップロードするときにブラウザのキャッシュをクリアするにはどうすればよいですか？

画像のサムネイルも含まれているアイテムのリストがあります。サムネイル画像を変更する必要がある場合がありますが、ファイル名は同じままにしてください。ブラウザのキャッシュから画像を取得する代わりに、ブラウザに新しくアップロードされた画像をダウンロードさせる方法はありますか？

これは、人々がアバターを更新するときに非常に適切であり、ブラウザーのキャッシュをクリアするか、ブラウザーを再起動するまで、古いアバターを見続ける一部のユーザーに混乱を引き起こします。

phpbrowser-cache
17
user15063

画像srcの末尾に一意の番号を追加します

すなわち

<?php

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

これは、アバターを更新するためのフォームでのみ実行してください

私のために働く

ところで、これは他の静的ファイルの更新を強制するためにうまく機能します

つまり、cssファイルのhtmlは

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

ファイルの変更時間を使用できます。

<?

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

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

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

?>

ファイルが変更されると、クライアントキャッシュがクリアされます

6
Leo

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

キャッシュされた画像は、手動のページ更新（ブラウザでF5キーを押す）でも無効になります。これは、Javascriptメソッドlocation.reload（）がボディロードで起動されることでシミュレートできます。永続的なリロードを回避するために、これは1回だけ実行できます。ユーザーが新しいアバターをアップロードすると、ReloadPendingリクエストはセッションで永続的に設定され、応答されるとリセットされます。

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

アバターのアップロード後にページ全体を再読み込みすると、ページのちらつきが発生しますが、これは1回だけ発生します。これは、許容できると思います。

1
vitsoft

.htaccessファイルでこれらのルールを使用してください。これらのルールを使用して、同じファイル名での画像の再アップロードに関連する問題を解決しました。

# 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
1
Pooja Gupta

画像を送信するときは、Expiresヘッダーを送信しないように注意してください。このキャッシュヘッダーの送信も検討してください。

Cache-Control: must-revalidate

これにより、ブラウザは毎回サーバーに画像を要求します。リクエストのIf-Modified-Sinceヘッダーに注意してください。画像が変更されていない場合は、304HTTPコードで応答します。

この手順全体（再検証が必要、If-Modified-Since、304の回答）により、ブラウザーは画像コンテンツをキャッシュできますが、同時にファイルが変更されているかどうかをサーバーに確認できます。

もう1つの、おそらくもっと簡単な解決策は、Expiresヘッダーのみを将来の短い時間、たとえば10分に設定し、ユーザーに10分の遅延を通知することです。これにより、画像に対してHTTPリクエストをまったく行う必要がないため、ほとんどのページの読み込みが高速化されます。

1
Emil Vikström

これを行うための最良の方法の1つは、画像の取得と投稿に同じURL（REST）を使用することであることがわかりました。

POST/my/image（キャッシュ制御：キャッシュなし、再検証する必要があります）

GET/my/image（Cache-control：must-revalidate）

0
Hatch