html:
<div id="imgPreview" style='width:144px; height:80px;'> <img id='img_browse' title="" src="" alt="" width="144" height="80" /> </div> <asp:FileUpload ID="fupSynopsisPic" onchange='PreviewImage(this)' CssClass="normaltextinputclass" Width="320" runat="server" />
js:
function PreviewImage(imgFile) { var filextension=imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length); filextension=filextension.toLowerCase(); if ((filextension!='.jpg')&&(filextension!='.gif')&&(filextension!='.jpeg')&&(filextension!='.png')&&(filextension!='.bmp')) { alert("对不起,系统仅支持标准格式的logo,请您调整格式后重新上传,谢谢 !"); imgFile.focus(); } else { var path; if(document.all)//IE { imgFile.select(); path = document.selection.createRange().text; document.getElementById("imgPreview").innerHTML=""; document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")";//使用滤镜效果 } else//FF { path = imgFile.files[0].getAsDataURL(); document.getElementById("img_browse").src = path; } } }
//////////////////////////////////////
在IE6中可以很轻易的预览本地图片,只要指定 img的src就可以了。
但是在IE7中就不行了。
必须使用AlphaImageLoader属性
例:
<style type="text/css">
#newPreview
{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
</style>
<script type="text/javascript" language="javascript">
function PreviewImg(imgFile)
{
var newPreview = document.getElementById("newPreview");
newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
newPreview.style.width = "80px";
newPreview.style.height = "60px";
}
</script>
<div id="newPreview"></div>
<p>请选择一个图片进行预览:<input type="file" size="20" onchange="javascript:PreviewImg(this);" /></p>
在这里:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader 是一个css滤镜,支持IE5.5以上版本
filter: progid: DXImageTransform.Microsoft.AlphaImageLoader( enabled=bEnabled, sizingMethod=sSize, src=sURL)
属性:
enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false
true : 默认值。滤镜激活。
false : 滤镜被禁止。
具体:
说明:
在对象容器边界内,在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG格式,则0%-100%的透明度也被提供。
PNG格式的图片的透明度不妨碍你选择文本。也就是说,你可以选择显示在PNG格式的图片完全透明区域后面的内容。