代码如下 | 复制代码 |
<style type="text/css"> #newPreview { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); } .style1 { width: 507px; } </style> </head> <script language="javascript" type="text/javascript"> <div id="newPreview"></div> <asp:FileUpload ID="FileUpload1" onchange="PreviewImg(this)" runat="server" Width="408px" /> |
实例二
代码如下 | 复制代码 |
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JS上传前预览图片</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> </head> <body> <p>兼容IE6、IE7</p> <div id="newPreview"></div> <div id="showPicUrl"></div> <hr /> <p> 选择图片:<input type="file" size="20" onchange="javascript:PreviewImg(this);" /> </p> </body> </html> |
可是浏览小图Div会小,浏览大图可能会占据整个页面,我们希望以固定的大小显示所有的图片
可以使用他的scale属性.可是这个属性有个问题,浏览大图时,他会缩小原图,浏览小图时就惨了,他会放大小图,
使小图模糊不清。
我们添加个方法改变这种情况。
代码如下 | 复制代码 |
function setImg(o) { var width_img; var height_img; o.style.visibility = "visible"; var width=274; //预定义宽 var ratW; //宽的缩小比例 } |
以上在IE7中测试通过