使用Javascript预览本地图片

前两天刚跟朋友讨论JS预览客户端图片的问题,结论是不能预览。今天在看到这篇文章,才知道我们错了,IE可以用ACTIVEX控制预览,FF也有自己的方法。

原文:http://hi.baidu.com/thinkinginlamp/blog/item/2297a7eff802901cfdfa3c10.html

很久很久以前,那时候还是IE的天下,使用Javascript预览本地图片实现起来非常简单,就是设置一下:

document.getElementById(“image”).src = “file:///” + document.getElementById(“input”).value;

不过出于安全的考虑,现在的浏览器都不允许…src = file:///…这样的写法,作为替代,IE可以使用 “DXImageTransform.Microsoft.AlphaImageLoader”滤镜的方式,而Firefox则提供了一个 getAsDataURL方法。



<!--
#preview {
width: 270px;
height: 129px;
}
-->

<!--[if IE]>
<mce:style><! 
#preview {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
}
-->

<!--[endif]-->
<script type="text/javascript"><!--mce:0--></script>

<input type="file" />
<div id="preview">
<img id="image" src="http://www.baidu.com/img/baidu_logo.gif" alt="" /></div>

为了脱离Javascript菜鸟的苦海,这几天在Javascript上花了太多的时间,明天开始换换口味。

发表评论

电子邮件地址不会被公开。 必填项已用*标注