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).
| User Level: | Beginner |
|---|---|
| Product: | Dreamweaver 3, Dreamweaver 4, Dreamweaver MX, Dreamweaver MX 2004, UltraDev 1, UltraDev 4 |
| Browser: | All |
| Technologies: | JavaScript |
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 Place the following script in the content box and add it to your document:
<script language="JavaScript"
type="text/JavaScript"> 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 ! |
to insert a Javascript.Marcellino Bommezijn
Marcellino 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.
User Reviews
Total of 9 reviewsRE: RE: Resolved - RE: syntax typo in popup=
Written by m Trimmell on September 28, 2006function 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 ...
RE: Resolved - RE: syntax typo in popup=
Written by m Trimmell on September 28, 2006// 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 ...
Resolved - RE: syntax typo in popup=
Written by m Trimmell on September 28, 2006Here is the correct syntax: 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 = ...
syntax typo in popup=
Written by m Trimmell on September 28, 2006This has a syntex typo preventing the code to run correctly. I changed the syntex to....popup = window.open(''imagePreview', width='600,' height='450,' left='100,' top='75,' screenx='100,' screeny='75,' scrollbars, location, menubar, status, ...
RE: RE: Setting the Titel fot the pop-up page
Written by Jelle-Jacob de Vries on July 22, 2003Thanks a lot!
RE: Setting the Titel fot the pop-up page
Written by Marcellino Bommezijn on July 21, 2003Just look at the code where it says; popup.document.writein and add the tags for the page title in html code.
Setting the Titel fot the pop-up page
Written by Jelle-Jacob de Vries on July 21, 2003How can set the titel for the pop-up page instead of URL form the previous page it is now using?
Ooops
Written by Andi Fenner on December 20, 2002I take it all back! All I had to do was change the file in the on click Event Sorry
