<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> Local Image Preview </title>
<style type= "Text/css" >
#preview {width:100px;height:100px;border:1px solid #000; overflow:hidden;}
#imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (sizingmethod=image);}
</style>
<script type= "Text/javascript" >
function Previewimage (file)
{
var MAXWIDTH = 100;
var maxheight = 100;
var div = document.getElementById (' preview ');
if (File.files && file.files[0])
{
div.innerhtml = ' ';
var img = document.getElementById (' Imghead ');
Img.onload = function () {
var rect = Clacimgzoomparam (MAXWIDTH, MaxHeight, Img.offsetwidth, img.offsetheight);
Img.width = Rect.width;
Img.height = Rect.height;
Img.style.marginLeft = rect.left+ ' px ';
Img.style.marginTop = rect.top+ ' px ';
}
var reader = new FileReader ();
Reader.onload = function (evt) {img.src = Evt.target.result;}
Reader.readasdataurl (File.files[0]);
}
Else
{
var sfilter= ' Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (sizingmethod=scale,src= ";
File.select ();
var src = document.selection.createRange (). text;
div.innerhtml = ' ';
var img = document.getElementById (' Imghead ');
Img.filters.item (' DXImageTransform.Microsoft.AlphaImageLoader '). src = src;
var rect = Clacimgzoomparam (MAXWIDTH, MaxHeight, Img.offsetwidth, img.offsetheight);
Status = (' rect: ' +rect.top+ ', ' +rect.left+ ', ' +rect.width+ ', ' +rect.height ');
div.innerhtml = "<div id=divhead style= ' width:" +rect.width+ "Px;height:" +rect.height+ "Px;margin-top:" +rect.top+ " Px;margin-left: "+rect.left+" PX; " +sfilter+src+ "\" ></div> ";
}
}
function Clacimgzoomparam (maxWidth, maxheight, width, height) {
var param = {top:0, left:0, Width:width, height:height};
if (Width>maxwidth | | height>maxheight)
{
Ratewidth = Width/maxwidth;
Rateheight = Height/maxheight;
if (Ratewidth > Rateheight)
{
Param.width = MaxWidth;
Param.height = Math.Round (height/ratewidth);
}else
{
Param.width = Math.Round (width/rateheight);
Param.height = MaxHeight;
}
}
Param.left = Math.Round ((maxwidth-param.width)/2);
Param.top = Math.Round ((maxheight-param.height)/2);
return param;
}
</script>
<body>
<div id= "Preview" >
<!--default image without preview, get one----
</div>
<br/>
<input type= "File" onchange= "Previewimage (This)"/>
</body>