ie7.0、8.0和火狐浏览器实现上传前预览

作者在 2008-05-14 20:18:04 发布以下内容

鉴于安全问题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 !所有的工作已经完成……

 

————————————————————
技术日志 | 阅读 3763 次
文章评论,共1条
hebingbing(作者)
2008-05-15 22:57
1
我相当的郁闷……为什么这个代码到iis里面就又不行了啊……
如果有哪位网友看到这篇文章并有更好的解决方案请指点……
游客请输入验证码