DMX|ZONE
Register Login

Preview Image with File Field

This short tutorial will show you how to attach a pre-view button to your file field, so you can see what image your uploading before actual hitting the upload button.

Note: the script view below gets truncated due to the width of the page, please copy/paste the javascript from the example (right-click>view source).

I had the problem while browsing through my image folders, i couldn't find the imagename i was looking for or just made a guess which one it was. Of course you can right-click the file and select "Example", but this feature doesn't within your application with the use of some Javascript.

First of all we create a form with a file field and a button named "Preview". See example below:

Next place your cursor in the head of your document (codeview) and use your script button to insert a Javascript.

Place the following script in the content box and add it to your document:

 

<script language="JavaScript" type="text/JavaScript">
function previewImage(fileInfo) {
var filename = "";
//create the path to your local file
if (fileInfo == null) {
if (document.form1.file != "") {
filename = "file:///" + document.form1.file.value;
}
} else {
filename = fileInfo;
}
//check if there is a value
if (filename == "") {
alert ("Please select a image.");
document.form1.file.focus();
} else {
//create the popup
popup = window.open('', 'imagePreview', )width=600,height=450,left=100,top=75,
screenX=100,screenY=75,scrollbars,location,menubar,status,toolbar,resizable=1');
//start writing in the html code
popup.document.writeln("<html><body bgcolor='#FFFFFF'>");
//get the extension of the file to see if it has one of the image extensions
var fileExtension = filename.substring(filename.lastIndexOf(".")+1);
if (fileExtension == "jpg" || fileExtension == "jpeg" || fileExtension == "gif"
|| fileExtension == "png")
popup.document.writeln("<img src='" + filename + "'>");
else
//if not extension fron list above write URL to file
popup.document.writeln("<a href='" + filename + "'>" + filename + "</a>");
popup.document.writeln("</body></html>");
popup.document.close();
popup.focus();
}
}
</script>

Now attach the function (onClick event) to your "Preview" button:

<INPUT TYPE="button" NAME="Button" VALUE="Preview" ONCLICK="previewImage(document.form1.file.value)">

Your form looks like this now:

<FORM ACTION="" METHOD="post" ENCTYPE="multipart/form-data" NAME="form1">
<INPUT TYPE="file" NAME="file">
<INPUT TYPE="button" NAME="Button" VALUE="Preview" ONCLICK="previewImage(document.form1.file.value)">
</FORM>

That's it !

Marcellino Bommezijn

Marcellino BommezijnMarcellino Bommezijn is one of the managers at dmxzone.com. He is a contributor on the tutorials section.

Owner of Senzes Media (http://www.activecontent.nl) which provides professional services and web applications for mid-sized companies.

ActiveContent CMS is the ASP.NET Content Management solution that is used for building professional and rich-featured websites.

See All Postings From Marcellino Bommezijn >>

Comments

Useful but limited

December 20, 2002 by Andi Fenner
This is a really handy tutorial however the preview doesn't appear to work on a form that has multiple file upload fields.  This would be a good feature

Ooops

December 20, 2002 by Andi Fenner

I take it all back!  All I had to do was change the file in the on click Event

Sorry

Setting the Titel fot the pop-up page

July 21, 2003 by Jelle-Jacob de Vries

How can set the titel for the pop-up page instead of URL form the previous page it is now using? 

RE: Setting the Titel fot the pop-up page

July 21, 2003 by Marcellino Bommezijn
Just look at the code where it says; popup.document.writein and add the tags for the page title in html code.
See all 9 Comments

You must me logged in to write a comment.

Currency:
Company Info
Payment & Pricing
Legal Notices
Guides
Copyright © 2001-2024 Dynamic Zones International B.V., All Rights Reserved.