使用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上花了太多的时间,明天开始换换口味。


( ! ) Warning: Missing argument 1 for cwppos_show_review(), called in /data/www/enjoyphp/wp-content/themes/flat/content-single.php on line 29 and defined in /data/www/enjoyphp/wp-content/plugins/wp-product-review/includes/legacy.php on line 18
Call Stack
#TimeMemoryFunctionLocation
10.0000355032{main}( ).../index.php:0
20.0001355320require( '/data/www/enjoyphp/wp-blog-header.php' ).../index.php:17
30.152110164456require_once( '/data/www/enjoyphp/wp-includes/template-loader.php' ).../wp-blog-header.php:19
40.153310235600include( '/data/www/enjoyphp/wp-content/themes/flat/single.php' ).../template-loader.php:74
50.225410790488get_template_part( ).../single.php:5
60.225410791008locate_template( ).../general-template.php:167
70.225410791104load_template( ).../template.php:643
80.225510791488require( '/data/www/enjoyphp/wp-content/themes/flat/content-single.php' ).../template.php:686
90.230110776600cwppos_show_review( ).../content-single.php:29

发表评论

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