I always have a doubt that I couldn't solve that is the problem of previewing an upload image properly.

I have wrote a php coding to upload and delete an image. In the page, user is able to view the image they have uploaded once they click the upload button. However, there is a few problem here. It is not working as expected.

The problem is as below:

When upload button is clicked, it shows the previous uploaded image instead of the new uploaded image. It will only show the updated image when the page is refresh. To do so, I include a <META http-equiv='refresh' content='0; URL=admin_news_events.php'> to refresh the page but it looks like the page and the image flip two times to show the updated image. The tag I used to display the image is <img src>. I wonder how to solve this problem. Can anyone please give me an idea. Thank you.

Here are the coding:

[php]
// when Upload Image button is clicked
if ( $upimg )
{
$uploadDir = 'C:/PortableWebAp/program/www/localhost/GreedySurvey/Administrator/Events/';
$fileName = $_FILES['imgfile']['name'];
$tmpName = $_FILES['imgfile']['tmp_name'];

$ext = substr(strrchr($fileName, "."), 1);

if(!(is_dir("Events")))
{
mkdir("Events");
}

if ( empty($imgfile) )
{
echo "ERROR: No file is given";
}
else if ( $ext != "jpg" )
{
echo "ERROR: Image files must be in jpg format";
}
else
{
$fileName = "Events.jpg";
$filePath = $uploadDir . $fileName;
$result = move_uploaded_file($tmpName, $filePath);
echo "<META http-equiv='refresh' content='0; URL=admin_news_events.php'>";
// echo "Image has been uploaded successfully";
}
}

$img = "Events/Events.jpg";
if ( $delete1 )
{
if( file_exists($img) )
{
unlink($img);
echo "Image has been deleted";
}
}
[/php]

Instead of using the HTML meta-refresh, you can send specific HTTP headers that thell the browser not to cache the image.

See the header() function: http://php.net/manual/en/function.header.php

These headers should do it for you:
[php]
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Date in the past
[/php]

You can also simply add a random number as a parameter at the end of the image src. Say the date, that will force the browser to reload the image.

eg:

<img src="image.jpg?time=<?php echo now(); ?>" />

That makes sure you have a new src each time, but it still points to the same image.

Can you explain what header tag is used for. I am always confuse with it. I saw a few example that use it but I don't know what is the exact purpose. The coding still work even if I eliminate the header tag.

I did try to apply the header tag in php coding but it always causing error in the coding. Hence, I don't use it in any php coding because I can't find what is the problem.

HTML headers tell the web browser about the page. Things like status information, or special requests are in the headers and are sent before the content of the page. You cannot have any output before headers are sent, otherwise you get errors.

Can you imagine the "oh but" method of programming? Do x, oh but do it like y. This requirement helps keep that away.

Hi Puckdropper,

Think you made a lil typo. Its HTTP Headers instead of HTML Headers.

rinoa04,

Like Puckdropper mentioned, you need to make sure you dont output any content before setting a HTTP header to be sent.
What you can do is use the output buffering functions in php so that you dont need to worry about those errors.

See: http://us3.php.net/outcontrol

Hmm... Now I understand more on header though I am still a bit confuse. Thank you for your help digital-ether and Puckdropper.
Thank you very much

No typo, HTML means HTTP To Markup Language. See how much more descriptive it is?

Yes, I did state that incorrectly. Good catch, digital-ether.

rinoa04,

What are you still confused about? At this point, the only thing I could really do to help is refer you to a search engine with the query "HTTP headers".

Lol... it is..

Ok. I get it now after trying on a few examples. I understand why I always get those errors. Thanks again to the both of you Puckdropper and digital-ether.