Meditation and Mindfulness for Software / IT Professionals. Conducted by Bipin Joshi in Thane. Read more...

Showing Preview Of The Actual Im

Showing Preview Of The Actual Image Using JavaScript Before Uploading It To The Server

Introduction

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.

Web Form with the JavaScript function

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" 
Inherits="Match.WebForm2"%>
<HTML>
<HEAD>
<script language=�javascript�>
function isGraphics(filename) 
{
  var i=filename.length;  // get file length
  i=filename.lastIndexOf('.')+1;  // find extension
  var ext=filename.substr(i);  // pull out extension
  
  switch(ext.toLowerCase())
 {
    case "gif":  // GIF
    case "jpg":  // JPG
    case "jpeg":  // JPG
    return true;
    break;
    default:
    return false;
  }
}
function setImage(file) 
{

  var image=document.getElementById("Preview");
  if(file.value.length) if(isGraphics(file.value))
    if(image.src!=file.value) image.src=file.value;
}
</script>
<title>Preview</title>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<TABLE id="Table1" cellSpacing="1" 
cellPadding="1" width="100%" border="0">
<TR>
<TD>
<IMG id=�Preview� alt="" 
src="../Images/Preview.gif" 
border="1" height="80" width="100"></TD>
<TD>
<INPUT id="File1" 
type="file" name="File1" runat="server"></TD>
</TR>
</TABLE>
</form>
</body>
</HTML>

Now as our page is ready it�s now time to call the JavaScript functions. You 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 JavaScript functions. We need to use the Add 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)

File1.Attributes.Add("OnChange", "setImage(this)")

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 example), you can write a JavaScript to resize the image to a fixed size after some given time frame so that user will be able to view the actual resolution.
  • You can also create a html page at run time to show the image in a separate window.

Happy Programming!




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

Posted On : 06 Feb 2005



Tags : ASP.NET Web Forms JavaScript