Hi Meenu,
kindly refer to below sample code segment.. good luck and take care my fren.. :)
<!-- TWO STEPS TO INSTALL IMAGE UPLOAD PREVIEW:
1. Copy the coding into the HEAD of your HTML document
2. Add the last code into the BODY of your HTML document -->
<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->
-
<HEAD>
-
<script type="text/javascript">
-
<!-- Begin
-
/***** CUSTOMIZE THESE VARIABLES *****/
-
-
// width to resize large images to
-
var maxWidth=100;
-
// height to resize large images to
-
var maxHeight=100;
-
// valid file types
-
var fileTypes=["bmp","gif","png","jpg","jpeg"];
-
// the id of the preview image tag
-
var outImage="previewField";
-
// what to display when the image is not valid
-
var defaultPic="spacer.gif";
-
-
/***** DO NOT EDIT BELOW *****/
-
-
function preview(what){
-
var source=what.value;
-
var ext=source.substring(source.lastIndexOf(".")+1,source.length).toLowerCase();
-
for (var i=0; i<fileTypes.length; i++) if (fileTypes[i]==ext) break;
-
globalPic=new Image();
-
if (i<fileTypes.length) globalPic.src=source;
-
else {
-
globalPic.src=defaultPic;
-
alert("THAT IS NOT A VALID IMAGE\nPlease load an image with an extention of one of the following:\n\n"+fileTypes.join(", "));
-
}
-
setTimeout("applyChanges()",200);
-
}
-
var globalPic;
-
function applyChanges(){
-
var field=document.getElementById(outImage);
-
var x=parseInt(globalPic.width);
-
var y=parseInt(globalPic.height);
-
if (x>maxWidth) {
-
y*=maxWidth/x;
-
x=maxWidth;
-
}
-
if (y>maxHeight) {
-
x*=maxHeight/y;
-
y=maxHeight;
-
}
-
field.style.display=(x<1 || y<1)?"none":"";
-
field.src=globalPic.src;
-
field.width=x;
-
field.height=y;
-
}
-
// End -->
-
</script>
-
</HEAD>
-
<!-- STEP TWO: Copy this code into the BODY of your HTML document -->
-
<BODY>
-
<div align="center" style="line-height: 1.9em;">
-
Test it by locating a valid file on your hard drive:
-
<br>
-
<input type="file" id="picField" onchange="preview(this)">
-
<br>
-
<img alt="Graphic will preview here" id="previewField" src="spacer.gif">
-
<br> <div style="font-size: 7pt;">
-
Script submitted by: <a href="http://www.abrahamjoffe.com.au/">Sydney Wedding Video / DVD</a></div>
-
</div>
-
-
<p><center>
-
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
-
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
-
</center><p>
-
</BODY>
-
47
