上传图片预览（firefox,IE6,IE7+）

 

上传图片预览，看似一个很简单的一个功能，可以实现起来并不是想象的那么容易。其原因是各浏览器的支持和默认安全级别的差异。

先看一段代码吧

<img id="img" src="" /> <input type="flie" id="filesrc" οnchange="preView()"/> <mce:script type="text/javascript"><!-- function preView() { var patn = //.jpg|/.jpeg|/.gif|/.png|/.bmp/i; if(patn.test(filesrc.value)) { img.src=filesrc.value; }else{ alert("你选择的不是图片"); } } // --></mce:script>

 

从表面上去，没有一点问题，把图片的本地路径给img标签的src就可是显示。

 

可是FF的安全性要求浏览器默认不能直接访问本地文件，显示不了了。

FF在上传文件这前一般会把相应的文件缓存，其实现方式是通过一个getAsDataURL函数来得到本地文件的路径

filesrc.files.item(0).getAsDataURL();

 

同样的IE7默认也不允许直接访问本地文件，怎么办，只能通过滤镜来实现了。

DXImageTransform.Microsoft.AlphaImageLoader

 

现在看来，上传图片预览得区分对待了，不但要区别不同的浏览器，还要区别浏览器的版本。

看实现代码

<mce:script type="text/javascript"><!-- function preView() { alert(navigator.userAgent); var patn = //.jpg|/.jpeg|/.gif|/.png|/.bmp$/i; if(patn.test(filesrc.value)){ if(navigator.userAgent.indexOf("Firefox")>-1){ img.src=filesrc.files.item(0).getAsDataURL(); }else if(navigator.userAgent.indexOf("MSIE 6.0") == -1 && navigator.userAgent.indexOf("MSIE") > -1){ Imgview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = filesrc.value; Imgview.style.width = "209"; Imgview.style.height = "72"; Imgview.removeChild(img); }else img.src=filesrc.value; }else{ alert("你选择的不是图片"); } } // --></mce:script> <div id="Imgview" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);" mce_style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);"> <img id="img" src="" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);" mce_style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);"/> </div> <input type="file" id="filesrc" οnchange="preView()" />

 

附DXImageTransform.Microsoft.AlphaImageLoader介绍－－－来自于博客在水一方

Microsoft.AlphaImageLoader 是IE滤镜 的一种，其主要作用就是对图片进行透明处理。虽然FireFox和IE7以上的IE浏览器已经支持透明的PNG图片，但是就IE5-IE6而言还是有一定的意义。

语法：

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled= bEnabled , sizingMethod= sSize , src= sURL )

属性：

enabled	:	可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false true :　 默认值 。滤镜激活。 false :　 滤镜被禁止。
sizingMethod	:	可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。 crop :　 剪切图片以适应对象尺寸。 image :　 默认值 。增大或减小对象的尺寸边界以适应图片的尺寸。 scale :　 缩放图片以适应对象的尺寸边界。
src	:	必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。

特性：

Enabled	:	可读写。布尔值(Boolean)。参阅 enabled 属性。
sizingMethod	:	可读写。字符串(String)。参阅 sizingMethod 属性。
src	:	可读写。字符串(String)。参阅 src 属性。