アップロード時にイメージをリフレッシュする

Question

ユーザーのIDでサーバーにイメージをアップロードするスクリプトがあります。写真を変更するには、最初に上書きされます。問題は、新しい画像の寸法を持つ古い画像が、ブラウザをリフレッシュするまでしばらく表示されることです。これを防ぐ方法を教えてください。

スクリプト：ブラウザが古いキャッシュされたものを使用するのではなく、新しいイメージをロードするよう

function uploadProfilePicture($memberID,$extension) 
{ 
    ##### FIND ERRORS ##### 
    $error = ""; 

    // check if larger than 5mb 
    $avatar = $_FILES['uploadedAvatar']; 
    if($avatar["size"] > 5000000){ //5mb 
     $error = SETTINGSphoto_less_5meg; 
    } 
    //check if member selected a photo 
    if($avatar['name'] == ""){ 
     $error = SETTINGSphoto_no_upload; 
    } 

    //check if photo is of allowed formats 
    if( $avatar["type"] != "image/png" ){ 
     if( $avatar["type"] != "image/gif" ){ 
     if( $avatar["type"] != "image/jpg" ){ 
      if( $avatar["type"] != "image/jpeg" ){ 
       if( $avatar["type"] != "image/pjpeg" ){ 
        $error = SETTINGSphoto_file_type; 
       } 
      } 
     } 
     } 
    } 

    #### END FIND ERRORS #####  

    ##### DISPLAYS ERRORS ###### 
    if($error != ""){ 
      echo '<span style="background-color:#E05641;" class="pint2">'.$error.'</span>'; 
    ##### END DISPLAYS ERRORS ###### 


    ##### PROCESS THUMBNAIL AND UPLOAD PICTURE ##### 
    }else{ 



     $ext = substr($avatar["name"], -4); //take off extention. 
     $fileName = $memberID.$extension.$ext; // rename picture with member's ID.w 
     unlink("photos/".$memberID.$extension.".jpg"); 
     unlink("photos/".$memberID.$extension."Thumb.jpg"); 

     copy($avatar['tmp_name'], "photos/".$fileName); //upload temp 

     //create virual image 
     if(preg_match('/[.](jpg)$/',strtolower($avatar["name"]))) { 
      $im = imagecreatefromjpeg("photos/".$fileName); 
     } else if (preg_match('/[.](gif)$/', strtolower($avatar["name"]))) { 
      $im = imagecreatefromgif("photos/".$fileName); 
     } else if (preg_match('/[.](png)$/', strtolower($avatar["name"]))) { 
      $im = imagecreatefrompng("photos/".$fileName); 
     } else if (preg_match('/[.](jpeg)$/',strtolower($avatar["name"]))) { 
      $im = imagecreatefromjpeg("photos/".$fileName); 
     }else{ 
      $im = imagecreatefromjpeg("photos/".$fileName); 
     } 

     //get height and width 
     $ox = imagesx($im); $oy = imagesy($im); 

     $final_width_of_image = 200; 
     $final_height_of_image = 200; 
     //$ratio = $final_width_of_image/$ox; //find ratio to apply to height 
     //$nx = $final_width_of_image; $ny = $oy * $ratio; 
     if($ox < $oy){ 

       $nx = 200; 
       $ny = floor($oy * (200/$ox)); 

     }else{ 

       $ny = 200; 
       $nx = floor($ox * (200/$oy)); 

     } 


     //$nm = imagecreatetruecolor($nx, $ny); 
     //imagecopyresampled($nm, $im, 0,0,0,0,$nx,$ny,$ox,$oy); //create new pic  
     $nm = imagecreatetruecolor($nx, $ny); 
     imagecopyresampled($nm, $im, 0,0,0,0,$nx,$ny,$ox,$oy); 

     unlink("photos/".$fileName); //delete temp image 

     imagejpeg($nm, "photos/".$memberID.$extension.".jpg",100); //save image // 100 = quality 

     $im = imagecreatefromjpeg("photos/".$memberID.$extension.".jpg"); 
     $nm = imagecreatetruecolor(200, 200); 
     imagecopyresampled($nm, $im,0,0,0,0,200,200,200,200); 
     imagejpeg($nm, "photos/".$memberID.$extension."Thumb.jpg",100); 



     $sql = "UPDATE exchange SET photo = 1 WHERE id = '$memberID'"; //update db 
     $mysql = new mysql(); 
     $mysql->query($sql); 
     ##### END PROCESS THUMBNAIL AND UPLOAD PICTURE ##### 

     echo '<span class="pint2">'.SETTINGSphoto_chage_success.' <a style="color:#ffffff" href="'.$_ENV['rootURL'].'/'.(in_array($_GET['lang'],$_ENV['supportedLanguages']) ? $_GET['lang']."/" : $nothing).HEADlanguage_exchange.'/id/'.$memberID.'">'.SETTINGSphoto_view_profile.'</a></span>'; 
     } 
}  

Answer 1

問題は、新しい画像の寸法を持つ古い画像が、ブラウザをリフレッシュするまでしばらく表示されることです。これを防ぐ方法を教えてください。

これを解決するには、ブラウザのキャッシュをクリアする必要があることをユーザーに伝えます。

これがオプションでない場合は、実際にユーザーがイメージをキャッシュするのを防ぐ必要があります。

イメージの各リビジョンを変更する必要があります。イメージのリビジョン番号を格納する整数フィールドをデータベースに追加します。次に、ユーザーのイメージを出力するたびに、実際のリビジョン番号もデータベースから取得します。画像URLのクエリ情報-一部としてそれを追加しますので、特定のリビジョンがキャッシュされ、

<img src="avatars/user/929292/photo.jpg?revision"> 
             ^^^^^^^^ 

ブラウザは、まだプロフィール画像をキャッシュしますが、あなたは、リビジョンの彼を認識させます。

旧アバター画像：

<img src="avatars/user/929292/photo.jpg?1"> 

は、ユーザーが新しいイメージをアップロードし、あなたがリビジョンフィールドをインクリメントし、新しいアバター画像は、次のとおりです。

<img src="avatars/user/929292/photo.jpg?2"> 

リビジョンが変更された場合、ブラウザの通知それはサーバーからイメージを選択します。

Answer 2

あなたは、新しいイメージにわずかに異なるファイル名を与えることができます。

Answer 3

イメージソース用のPHPコードでは、タイムスタンプを追加して写真を常に新しい写真として表示することができます。更新されたレコードに対してのみこれを行うには、いくつかのロジックを投げると、よりキャッシュに優しいでしょう。

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