鉴于安全问题ie7.0、8.0和火狐都不支持调用本地资源,所以要实现上传前预览不是一件容易的事情了……
直接将FileUpload的value赋值给img是不可能实现的。要实现这个功能就要借助css了……
css的滤镜可以解决这个问题,但是有一个缺点就是如果是gif动画图片的话预览的时候他是不会动的……
具体做法:
预览图片的层要加上下面这段css代码:
FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)
这是关键点
eg:
为预览的层定义css:
<style type="text/css">
#div1
{
FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)
}
</style>
定义javascript函数将fileupload的value赋值给层的img:
<script language="javascript" type="text/javascript">
function showpic(path){
document.all.div1.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = path
}
</script>
aspx页面的控件布局:
<asp:FileUpload ID="FileUpload1" runat="server" /> //上传控件
<div style=" 100px; height: 100px" id="div1"> //预览层
</div>
现在css也定义好了,层也调用上了这个css,javascript也定义好了,但是现在fileupload还没有调用这个函数。下面在cs页面添加对这个函数的调用:
protected void Page_Load(object sender, EventArgs e)
{
FileUpload1.Attributes.Add("onchange", "showpic(this.value)");
}
ok !所有的工作已经完成……