Showing Preview Of The Actual Im
Here is a simple way to provide preview functionality in your Web pages. The
idea is to have some kind of preview area on the HTML page where user can see
the image before submitting the request to the web server. Function ShowPreview()
in the following code will show the preview in the <img> tag and stuffs data
from the file field which is embedded in the <FORM> object. This method can be
easily extended to provide more features. In fact this can be used to create
separate window to show preview of the image.
First Function isGraphics() will check whether the requested file is an image
file or not. If it�s an image file the it will show the preview in the img tag.
Img tag contains a preloaded image just to avoid the Red Cross symbol (due to
the unavailability of image).
Second function setImage() will use getElementById method of document to find
the �Preview� id and set the source of the image, which is to be uploaded.
<%@ Page Language="vb" Codebehind="WebForm2.aspx.vb"
var i=filename.length; // get file length
i=filename.lastIndexOf('.')+1; // find extension
var ext=filename.substr(i); // pull out extension
case "gif": // GIF
case "jpg": // JPG
case "jpeg": // JPG
<form id="Form1" method="post" runat="server">
<TABLE id="Table1" cellSpacing="1"
cellPadding="1" width="100%" border="0">
<IMG id=�Preview� alt=""
border="1" height="80" width="100"></TD>
type="file" name="File1" runat="server"></TD>
can call it in the same way as in traditional asp or html, but we have marked
the File1 control to run at server and hence we will use .NET way of calling
method of the control's Attributes collection. The key parameter is used to
specify an attribute name. The value parameter is used to store the function
name to be called.
File1.Attributes.Add(key As String, value As String)
Now as everything is ready build the page and run in browser. Some
enhancements that you can do include:
- Instead of fixing the width and height (which I have done in this
after some given time frame so that user will be able to view the actual
- You can also create a html page at run time to show the image in a
Siddharth works as a Team Leader with INGRESS Consulting from last 7 months. He has 4 1/2 yrs of work experience. Currently involved in developing a CRM for INGRESS Consulting. He was also involved in developing some of India's most successful site such as
www.admissionhelp.com, www.nbcindia.com and www.visaonnet.com