Auto Preview of Image after selected.

Squintz

06-28-2004, 08:27 PM

I am creating an image gallery and I have two input fields, one for inputing a URL and another file input which allows you to browse for files on your computer. How do i make it so that if a person types a url in the first box that the Image Placeholder i have in my form will automatically change and display a preview of the image at that URL

OR

If someone browses their computer for an image and selects ok in the browse box that that image will be displayed in the preview place holder.

I would also like for only one box to be able to be filled out at a time to prevent errors from accuring.

So what i have is:

Enter URL: [ Text Box ]
or [Text Box] {Browse}

I would like for each to automatically preview somehow but i understand that the URL text box may require a added Preview button. Can someone help me with this. I don't know much JS

Squintz

06-28-2004, 08:49 PM

After doing a little searching i came up with this much.

<Input type="file" name="fieldName" onchange="document.Images["preview"].src=http://www.codingforums.com/archive/index.php/this.value">
<Img name="preview" src=http://www.codingforums.com/archive/index.php/"default.jpg">

I think i am going to get rid of the URL box and only use the file upload method. Now how would i use JavaScript to check the file extention and reject any files which do not contain JPG Gif BMP or PNG?

Willy Duitt

06-28-2004, 09:13 PM

Here is a regular expression to check the file extensions but this is not going to help you with your preview since you will need to upload those images to your server prior to using them on your page. You can not preview the files on someones PC unless you use Active X and they explicitly give you permissions to do so....

<script type="text/javascript">

</script>
</head>

<body>
<form>
<input type="file" onchange="chkExt(this)">
</form>

.....Willy

trib4lmaniac

06-28-2004, 09:17 PM

Don't forget to allow .jpeg :p

Squintz

06-28-2004, 10:49 PM

So this explains why my code does not work... but other people say it does work for them???

<input name="file" type="file" size="32" onChange="document.images.preview.src =(this.value)" />

<img name="preview" src=http://www.codingforums.com/archive/index.php/"images/default.gif" width="75" height="90" alt="Members Photo"></div>

glenngv

06-29-2004, 04:49 AM

This works both in Moz and IE. IE triggers onchange event when a file is already chosen but Moz triggers onclick event, so you have to add both handler. Actually, IE also triggers onclick but it fires when you click Browse button and you have not chosen a file.

You also need to put the file:// protocol and change \ to /.

<input type="file"
onclick="if (!doument.all) document.images['preview'].src='file:///'+this.value.replace(/\\/g,'/')"
onchange="document.images['preview'].src='file:///'+this.value.replace(/\\/g,'/')">