Preview Images

mohammed · 04-30-2007, 02:08 AM

Hello friends,

How to preview the images before submitted by the users using a form, for example, in a form an user enters his image there should be preview box in the form itself to enable the user to preview the images before they submit, by this procedure they will post wrong images,

Any logic from you will be very helpful.

Thanks.

brealmz · 04-30-2007, 01:53 PM

you need an ajax to do that. server will not know what what the image looks like unless you have uploaded it. i have no idea processing it in client side using javascript but still try googling it.

Costin Trifan · 04-30-2007, 03:54 PM

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<script type="text/javascript">

var imgId;
var objUpload;
function PreviewImage(/*As String*/ objUploadID , /*As String*/ imageID)
{
	objUpload =  document.getElementById(objUploadID);
	imgId = document.getElementById(imageID);
	
	imgId.src = objUpload.value;
}

</script>
</head>

<body>
<input type="file" name="ImageUpload1" size="33" />
<a href="javascript:PreviewImage('ImageUpload1', 'PreviewImage');">Preview Your Image</a>
<br>

<img id="PreviewImage" />
<br>
<br>

</body>
</html>

Is this what you need?

StupidScript · 04-30-2007, 04:19 PM

Nice, costin_trifan ... but a couple of things make it work better like:

Code:

...
function PreviewImage(imageID,imgSrc)
{
	imgId = document.getElementById(imageID);
	imgId.src = imgSrc;
}
</script>
...
<input type="file" name="ImageUpload1" size="33" onblur="PreviewImage('PrevImage',this.value)" /><br>
<img id="PrevImage" />

(PreviewImage was both the name of the function and the ID of the IMG to hold the display, and some browsers have a hard time handling a FILE type form element in the manner you presented it. I used onblur instead of a link, because they'll see it without needing to do anything.)

And why does this work without uploading the file to the server? Well, before they submit the form, the user establishes a path to the file on their own system, and the preview function just grabs that file for local viewing ... no uploading required!

Costin Trifan · 04-30-2007, 04:43 PM

I just wanted to show an example

Quote:

There are numbers of ways for coding an app...
The only thing that differentiate us is our point of view.