| The code is as follows |
Copy Code |
| <style type= "Text/css" >
#newPreview
{
Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (Sizingmethod=scale);
}
. style1
{
width:507px;
}
</style> <script language= "javascript" type= "Text/javascript" >
function Previewimg (imgfile)
{
var Newpreview = document.getElementById ("Newpreview");
NewPreview.filters.item ("DXImageTransform.Microsoft.AlphaImageLoader"). src = imgfile.value;
NewPreview.style.width = "158px";
NewPreview.style.height = "180px";
}
</script> <div id= "Newpreview" ></div> <asp:fileupload id= "FileUpload1" onchange= "previewimg (This)" runat= "Server" width= "408px"/>
|
Example Two
| The code is as follows |
Copy Code |
| <meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>js Pre-upload preview pictures </title>
<script type= "Text/javascript" language= "JavaScript" >
<!--
function Previewimg (imgfile) {
var Newpreview = document.getElementById ("Newpreview");
var imgdiv = document.createelement ("div");
Document.body.appendChild (IMGDIV);
ImgDiv.style.width = "118px"; ImgDiv.style.height = "127px";
Imgdiv.style.filter= "progid:DXImageTransform.Microsoft.AlphaImageLoader (Sizingmethod = scale)";
ImgDiv.filters.item ("DXImageTransform.Microsoft.AlphaImageLoader"). src = imgfile.value;
Newpreview.appendchild (IMGDIV);
var showpicurl = document.getElementById ("Showpicurl");
Showpicurl.innertext=imgfile.value;
NewPreview.style.width = "80px";
NewPreview.style.height = "60px";
}
-->
</script>
<body>
<p> compatible IE6, ie7</p>
<div id= "Newpreview" ></div>
<div id= "Showpicurl" ></div>
<p>
Select Picture: <input type= "file" size= "onchange=" javascript:previewimg (this); "/>
</p>
</body>
|
But browse small graph Div will be small, browse large image may occupy the entire page, we want to display all the pictures in a fixed size
You can use his scale properties. But this property has a problem, browse the big picture, he will shrink the original image, browse the small picture is miserable, he will put the size map,
Blur the small picture.
We add a method to change the situation.
| The code is as follows |
Copy Code |
| function Setimg (o)
{
var width_img;
var height_img; o.style.visibility = "visible";
Width_img=o.offsetwidth;
Height_img=o.offsetheight; var width=274; Predefined width
var height=100; Predefined high
var ratw; Narrow ratio of the width
var RatH; A high reduction in the proportion
var rat; Reduced proportions that are actually used
if (width_img<width && height_img{
If it is higher than the predefined width, the original image is displayed.
O.filters.item ("DXImageTransform.Microsoft.AlphaImageLoader"). Sizingmethod = "image";
Return
}else{
If the large, to change the sizingmethod to scale if the property is image, no matter how to change the width of the Div, does not work
O.filters.item ("DXImageTransform.Microsoft.AlphaImageLoader"). Sizingmethod = "scale";
}
rath=height/height_img;
ratw=width/width_img;
if (RATH<RATW)//Select the smallest as the actual reduction ratio
Rat=rath;
Else
RAT=RATW;
Width_img=width_img * RAT;
Height_img=height_img * RAT;
o.style.width=width_img;
o.style.height=height_img;
Modify ShowImage Method function ShowImage (path) {
Before processing is the original image, first hide it,
document.all.divShow.style.visibility = "hidden";
Document.all.divShow.filters.item ("DXImageTransform.Microsoft.AlphaImageLoader"). src = path;
Document.all.divShow.filters.item ("DXImageTransform.Microsoft.AlphaImageLoader"). Sizingmethod = "image";
In a little while, get the div's width high.
SetTimeout ("Setimg (document.all.divShow)", 100);
} |
The above test passes in the IE7
