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

问题在于，旧图片的尺寸与新图片一样，会显示一段时间，直到他们刷新浏览器。我怎样才能防止这种情况发生？

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

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

因此，您需要在图像的每个版本之间做出改变。在数据库中添加一个整数字段，用于存储图像的修订号。然后每次输出用户的图像时，也从数据库中获取实际的修订版号。将其添加为图片网址的查询信息部分：

<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(); ?>"/>

上传时刷新图片

3 个答案: