/    Sign up×
Community /Pin to ProfileBookmark

PHP Image Verification

Copy linkTweet thisAlerts:
May 22.2007

Hey guys and gals. I have ran into a bit a brick wall, and I can’t seem to find any articles on the web about this. Let me give you a little bit of a background no what I want to do. I have a register page that includes a random verification image that was generated from a PHP file. The PHP file creates the random image and uses the imagejpeg function to output the image to the browser. I include the random image using the following HTML code:

[CODE]<img name=”verImage” src=”generateImage.php” />[/CODE]

It outputs the image perfectly, but what I would like to do is include a link right below it to allow the user to refresh the image if they can’t see it, using something like the following:

[CODE]<a href=”#” onclick=”document.verImage.src=’generateImage.php’;return false;”>Refresh</a>[/CODE]

But whenever I click the refresh link, it does absolutely nothing. The old image stays there, but no new image is generated. I wasn’t for sure if this would be something that I would need to do with my javascript code or with my PHP code. So, any help would be tremendously appreciated. Thanks in advance guys.

to post a comment
PHP

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@dzysyakMay 22.2007 — Possible reason can be that your image is just cached. Try to do something like this:

[code=html]
<img name="verImage" src="generateImage.php?p=<?=mt_rand();?>" />
[/code]
Copy linkTweet thisAlerts:
@parkerblauthorMay 22.2007 — Well, that seems to work for the first click only, and this is what I had to do to get it to work:

[CODE]<img name="verImage" src="generateImage.php?p=<?php mt_rand();?>" />
<div class="note"><a href="#" onclick="document.verImage.src='generateImage.php?p=<? mt_rand();?>';return false;">Refresh</a></div>[/CODE]

So once the page loads, you can click the refresh link, and it will work the first time and the first time only. Then it will no longer generate a new image. Wow, that is really strange.
Copy linkTweet thisAlerts:
@parkerblauthorMay 22.2007 — After messing around for a bit, I found an alternative approach that seems to work fine, so I will go ahead and explain it a little bit for future reference if anybody else ever wants to do the same thing. Below is the steps I took:

First I called the script to set up the initial image:

[CODE]<img id="verImage" src="generateImage.php" />[/CODE]

Then for the refresh link, I called a Javascript function:

[CODE]<div class="note"><a href="#" onclick="refreshImage();return false;">Refresh</a></div>[/CODE]

And finally, the Javascript function I used was:

[CODE]function refreshImage()
{
var url = "generateImage.php?p=" + Math.random();
document.getElementById("verImage").setAttribute('src', url);
}[/CODE]

So after doing all that, it will generate a new image and put that in place of the previous image. I don't really understand why i had to pass the:

p=" + Math.random()

portion, so if anybody could extrapolate on this, it would be appreciated. Thanks.
Copy linkTweet thisAlerts:
@bokehMay 22.2007 — I don't really understand why i had to pass the [...] portion, so if anybody could extrapolate on this, it would be appreciated.[/QUOTE]The image is cached by the browser. Most inges are static and the browser has not reason to believe the image has changed between page loads hence no reason to waste resources calling it again.
Copy linkTweet thisAlerts:
@dzysyakMay 22.2007 — Please, read carefully what I have submitted:

[code=html]
<img name="verImage" src="generateImage.php?p=<?=mt_rand();?>" />
[/code]

not

[code=html]
<?php mt_rand();?>
[/code]

this will generate wrong code!!! Actually code you have written will dot generate random parameter.

Javascript code is also good. Like

[CODE]
p=<script>document.write(Math.random());</script>
[/CODE]

Actually the same thing, but client side.
Copy linkTweet thisAlerts:
@bokehMay 22.2007 — Actually the same thing, but client side.[/QUOTE]Except it's not valid. You can't have a script element inside another element.
Copy linkTweet thisAlerts:
@dzysyakMay 22.2007 — oops ? you are right. but idea is clear. It is possible to write all the image tag with the javascript. But as for me I think php is better in this case, because somebody can have javascript disabled and in this way visitor will have troubles. I know that Web 2.0 is not possible without javascript, but I prefer when some basic functions (like login, registratio, contact form) could work without javascript.
Copy linkTweet thisAlerts:
@parkerblauthorMay 23.2007 — Awesome...thanks for all the help guys. It was much appreciated.
×

Success!

Help @parkerbl spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...