Refresh image after upload (Ajax)

[eevan79]

I have the upload form and when the image is added, it is displayed on the screen without refreshing the page. It works OK, but when it comes to images with the same type of display shows the previous picture (until refresh the page or click on "view/refresh image" in browser).

 

When I upload an image from another format, then it is display correctly (eg, previous image was .jpg and the new .gif).

 

I have tried various methods to refresh but it does not work.

I tried javascript timeout to view it again but it does not display a new image.

I set timeout for 5 sec to refresh the image and then call this function:

function refreshIMG(link) {
  alert(link);
  document.getElementById("img").src=link;
  }

Also tried to call this function with input button (onclick), but no results. How to refresh image in real time (after Ajax upload)?

 

EDIT: When I click Open image in new tab (in browser) it opens new fresh image...but I cant refresh in real-time...

[Adam]

When you set the src of the image, add a few random digits on the filename like you would parameters for a normal page:

 

document.getElementById("img").src = link + '?rid=' + Math.random();

 

It'll still point to the same image, but the browser will cache it separately.

[eevan79]

Great. It's working fine.

 

 

I also added random digits in .php part, so that the image is immediately updated.

 

 

Thanks  MrAdam

[rodvelcar]

i found a better and easy solution for this problem

 

<img src="<?php echo $image_name; ?>?random=<?php echo $random_number; ?>" />