上传时刷新图像


refresh image on upload

我有一个脚本,它将用户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>';
        }
}    

问题是,旧图片和新图片的尺寸会显示一段时间,直到他们刷新浏览器。我该如何防止这种情况发生?

你可以通过告诉用户她应该清除浏览器缓存来解决这个问题。

如果这不是一个选项,那么您希望实际阻止用户缓存图像。

因此,您需要对图像的每个修订进行区分。在存储图像修订号的数据库中添加一个整数字段。然后,每次输出用户的图像时,也从数据库中获取实际的修订号。将其添加为图像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">

如果修订发生更改,浏览器会注意到这一点,并将从服务器中拾取图像。

您可以给新图像一个稍微不同的文件名,这样浏览器加载新图像而不是使用旧的缓存图像。

在图像源的PHP代码中,您可以附加一个时间戳,以强制照片始终显示为新照片。加入一些逻辑,只对更新的记录执行此操作,您将对缓存更加友好。

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