hi all of you,
I am new to jsp and javascript . I wanted to know that how to load the
image in the image tag after selecting from the file dialog and preview in the same page using javascript or jsp.
If anybody has the code plz forward it to me.
Its urgent...........
Thank you.
[nobr]<HEAD>
<script type="text/javascript">
// 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";
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;
}
</script>
</HEAD>
<BODY>
<div align="center" style="line-height: 1.9em;">
<br>
<input type="file" id="picField" onchange="preview(this)">
<br>
<img alt="Graphic will preview here" id="previewField" src="spacer.gif">
<br>
</div>
</BODY>
Change height and widht according to ur need. And create a image nnamed spacer.gif to display when form loads.[/nobr]
