Question

I’ve a php page with some forms used to upload images. Each form upload one image. Uploaded images replace images yet loaded in the page.

Here is a snippet:

<?php
// NO CACHING CODE
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

// FORM SUBMIT CODE
if (isset($_POST['submit_img1'])) {
    // used for some photo manipulation and checks
    require_once('WideImage/WideImage.php');
    //... some code ...
    unlink("path/" . $img1);
    $img_name = "path/" . $img1;
    $wideImage->saveToFile($img_name, 80);
    // ... some code ...
}

// PRINT IMAGE IN THE PAGE
echo '<p><img src="path/' . $img1 . '" width="100" height="100" class="prof_img" /></p>';
?> 

  //FORM FOR CHANGE THE IMAGE
    <form id="form_img1" name="form_img1" method="post" onSubmit="return checkFormImg1()"
action="" enctype="multipart/form-data">
    <input class="prof_input" type="file" name="img1" id="img1" />
    <input name="submit_img1" type="submit" class="prof_submit" value="Inserisci Immagine 1"
    />
</form>

The problem is that on reload (after submit button is pressed) the old images are displayed. But the new images have been properly uploaded replacing the old ones.

Excuse my english.

Answer 1

theres an easy little trick you can use for this. just append a random string to the end of the image file source like a $_GET parameter.

better than a random string is a timestamp, since your won’t risk using the same number twice.

use it like this in your img tag

src='img.jpg?rand=1234'