13

I'm creating an input form that allows users to upload an image. Once it has been submitted the user is returned to the form with a conformation bit at the top.

Any image that has been submitted is then previewed via a query to a MySQL database that stores the URL of the image. However, if the user uploads a photo, it is previewed, and then they decide to change that photo and resubmit the form, when it takes you back to the form the new photo doesn't show unless you manually press refresh on the browser.

Is there any way of forcing a refresh/cache deletion or refresh for that specific image rather than the whole page?

Thanks

DorianHuxley
  • 642
  • 4
  • 10
  • 22

5 Answers5

31

Add the modified date to the end of the image as a query.

<img src="/images/photo.png?=1239293"/>

In PHP

<img src="/images/photo.png?=<?php echo filemtime($filename)?>"/>
Reactgular
  • 52,335
  • 19
  • 158
  • 208
  • What function would you recommend for generating the timestamp? – DorianHuxley May 13 '13 at 16:15
  • 2
    I have just added the question mark without any timestamps when I have tricked browsers reloading. – bestprogrammerintheworld May 13 '13 at 16:26
  • 1
    If the images are stored on the hard drive, then you can just use the integer result of `filemtime`. It works even if you overwrite the old image file. http://php.net/manual/en/function.filemtime.php – Reactgular May 13 '13 at 16:28
  • 1
    One thing to watch out for is that in the absence of caching headers configured at the server level, the presence of a `?` may change the default assumption of the browser from "cache for a while because it's an image" to "never cache because it has a query string". Which is fine for this case, but not always what was intended. – IMSoP Jun 16 '13 at 17:28
14

In PHP you can send a random number or the current timestamp:

<img src="image.jpg?<?=Date('U')?>">

or

<img src="image.jpg?<?=rand(1,32000)?>">
Arvy
  • 1,072
  • 2
  • 16
  • 29
4

The trick here is to tell the browser to not cache the content. You can do this by putting these statements before ANYTHING else (no whitespace or anything!)

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

Depending on how you're loading the image, you can also do a javascript refresh of the image using jQuery.

Christian Stewart
  • 15,217
  • 20
  • 82
  • 139
  • 1
    -1, don't disable caching in the header for images. That will force the image to be downloaded for every page load. – Reactgular May 13 '13 at 16:04
  • This will make the browser not cache the content on the page. The performance will drop, but not very significantly; however, if you have a lot of images on the page it may drop it significantly. – Christian Stewart May 13 '13 at 16:04
  • @MathewFoscarini he wants the image to be downloaded for every page load. – Christian Stewart May 13 '13 at 16:04
  • If you just want to use javascript to refresh the image, you can use this: http://stackoverflow.com/questions/2104949/how-to-reload-refresh-an-elementimage-in-jquery – Christian Stewart May 13 '13 at 16:05
  • @ChristianStewart, no he wants the image to be downloaded when it's changed. – Reactgular May 13 '13 at 16:05
  • @DorianHuxley Personally, this is not for performance. Is the same than no use caché at all. This is server side control for cache on the browser. And is cool to know about headers and their features. – m3nda Feb 02 '15 at 23:15
0

You could replace the current image by a new one using JavaScript:

    <div id="imageHolder">this is where the image will show</div>
    <script type="text/javascript">
    function myfunction(){
    document.getElementById("imageHolder").innerHTML="<div id=\"imageHolder\"><img src='imagefolder/imagename.jpg' alt=''/></div>";
    }</script>

You need to trigger the function myfunction after completing the upload of course ...

Marco Bonelli
  • 63,369
  • 21
  • 118
  • 128
noamik
  • 756
  • 6
  • 22
0

This worked great for me:

image.jpg?=<?php echo rand() . "\n";?>
Bas
  • 1