权记 » IE

本地图片预览(支持IE6，IE7，IE8， Firefox3)

小权 — Tue, 12 Jan 2010 14:11:09 +0000

最近在Web项目开发过程中遇到的本地图片预览的需求，虽然最后因为其他原因没能使用，但是也算有些了解，整理出来。

这里我们按浏览器分，主要包括IE6，IE7/8 和Firefox3，不包含Opera，Safari和Chrome，这三个基本上需求很小，没有研究。

总结一下就是：

IE6下可以直接从file的value获取图片路径来显示预览。
IE7和IE8下通过select获取file的图片路径，再用滤镜来显示预览。
FireFox下调用file的getAsDataURL方法获取Data URI数据来显示预览。

下面是一个完整的Demo：

<html> <head> <script src="http://deepliquid.com/projects/Jcrop/js/jquery.min.js"></script> </head> <body> <input type="file" id="picture" name="picture" size="35" value="" onchange="setImg(this)"/> <div id="preview_fake" style="margin-left: 50px"> </div> <style type="text/css"> #preview_fake{ /* 该对象用于在IE下显示预览图片 */ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); } #preview_size_fake{ /* 该对象只用来在IE下获得图片的原始尺寸，无其它用途 */ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image); visibility:hidden; } </style> <script type="text/javascript"> function setImg(obj){ if( !obj.value.match( /.jpg|.gif|.png|.bmp/i ) ){ alert('图片格式无效！'); return false; } $("#preview_fake").empty(); var img = document.createElement("img"); img.setAttribute("src", ""); img.setAttribute("id", "preview"); document.getElementById("preview_fake").appendChild(img); if($.browser.msie){ if($.browser.version == 6.0){ $("#preview").attr("src",obj.value); }else{ var objPreview = document.getElementById('preview' ); var objPreviewFake = document.getElementById('preview_fake' ); var objPreviewSizeFake = document.getElementById('preview_size_fake' ); obj.select(); var imgSrc =document.selection.createRange().text; objPreviewFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src= imgSrc; objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src= imgSrc; autoSizePreview(objPreviewFake,objPreviewSizeFake.offsetWidth,objPreviewSizeFake.offsetHeight ); objPreview.style.display ='none'; } } if($.browser.mozilla){ $("#preview").attr("src",obj.files[0].getAsDataURL()); } if($.browser.opera){ alert("暂时不支持Opera浏览器"); } if($.browser.safari){ alert("暂时不支持Safari浏览器"); } } </script> </body> </html>

提示：你可以先修改部分代码再运行。

中国移动的网站能不能再做的烂点呢？

小权 — Mon, 30 Nov 2009 04:42:27 +0000

我这里谈到的是中国移动北京分公司的网站，其他省市的网站没有去深入测试，估计是大同小异。

1、网站打开速度特别慢

不知道为什么中移动的网站打开超级慢，按理说中移动网站的带宽应该是没有问题的，但是不知为什么每次打开都特别慢，而且经常中断了，在不同的电脑上，不同的网络环境差不多，原因未知。相比之下看看人家中国银行的网站www.boc.cn(没有做广告的嫌疑，只是做个比较)，基本上瞬间打开，可能你会说静态网页和动态网页的区别，但是我觉得这不是根本问题，因为速度已经不是一个数量级上的差距了。有时接通10086，话务员查询时打开网站也很慢，让我听了很久音乐，可见中移动内部也是很慢的。下图是打开网站时的一个截图，四个页面有一个是中国银行的，其他三个都是中移动的，截图时间是打开后2分钟左右的样子，点击可看大图：

2、网站对浏览器的兼容性

说到这个，那是超级烂，由于很久没有使用IE5.5和IE6了，不知道中移动的网站到底对哪个浏览器的兼容性好，反正我在IE7，IE8，Firefox3.5，Google Chrome上访问都有问题，IE7和IE8好在还凑合能使用，Firefox3.5和Google Chrome简直就没法用，就连一个小小的个人网站都知道去解决网站对浏览器兼容性的问题，试想中国最大的运营商和全球最大用户群体的电信企业，网站对浏览器的兼容性做到如此之烂，过去几年了还不去优化，实在是没话可说了，只能尽量少去使用或者不用。

3、“满意100”

忘记了中移动什么时候开始喊这个口号的，但是这几个月来，中移动的服务别说100分了，60分都达不到，10086打过去，客服90%的时间全席忙，网站的在线客服也是90%以上时间满员，处于等待状态，等待就等待吧，还经常断线，再进去前面又插进去几个客户了，继续等待继续断线，无语了，我昨天为了体验这个“满意100”，花了半个多小时打10086，没有打进去，花了20多分钟进行网站客服的咨询没能成功，客户有问题，但是却无法联系中移动客服，这样的服务如何做到“满意100”呢？

4、可能你会说，中移动服务这么烂，你为啥还用啊？

我有选择吗？前几年就中移动一家独大，其他运营商的服务比移动还烂，从最近几年开始，状况好些了，其他运营商也发展起来了，可我的号码用了N年了，换个号码多不方便大家又不是不知道，要是可以携号转运营商，我立马转。

==欢迎发表意见，欢迎转载==

浦发的手机银行从来就没打开过

小权 — Tue, 01 Sep 2009 04:33:11 +0000

使用的是HTC的WM手机, 换了几个, 都是使用自带的IE, 结果都是无法打开.

真服了浦发手机银行是怎么做的测试, 客户都打不开如何做推广.

无觅猜您也喜欢：
IE6 window.location 跳转问题	XP下 IE6 英文系统 Date 问题	[10/14周主题] – IE6 hacks	IE6 IE7 FF的区别	IE and firefox comflict in web design
无觅

无觅猜您也喜欢：
做网站看起来很简单	本地图片预览(支持IE6，IE7，IE8， Firefox3)	将网站的Theme和其他资源进行了项目托管	浦发的手机银行从来就没打开过	转载：每个中国人必须知道的国学常识
无觅

无觅猜您也喜欢：
[10/14周主题] – IE6 hacks	给CPU为OMAP850的智能手机安装Android系统尝鲜.	[转载]ATM取出假钱—>银行无责	好好的手机为什么要转让？	IE6 window.location 跳转问题
无觅