【原创】JavaScript 图片预览效果

随着浏览器安全性的提高，要实现图片预览也越来越困难。
不过群众的智慧是无限的，网上也有很多变通或先进的方法来实现。
在研究了各种预览方法后，作为总结，写了这个程序，跟大家一起分享。
上次写的简便无刷新文件上传系统最初的目的就是用来实现这个图片预览效果。

兼容：ie6/7/8, firefox 3.5.5
后台支持下还兼容：opera 10.10, safari 4.0.4, chrome 3.0



详细程序说明和效果预览请看这里

完整实例下载（asp.net版）

完整实例下载（asp版）

---

程序说明

【基本原理】

图片预览主要包括两个部分：从file表单控件获取图像数据，根据数据显示预览图像。
程序的file和img属性就是用来保存file控件和显示预览图像的容器的，而img还必须是img元素。

程序有以下几种预览方式：
simple模式：直接从file的value获取图片路径来显示预览，适用于ie6；
filter模式：通过selection获取file的图片路径，再用滤镜来显示预览，适用于ie7/8；
domfile模式：调用file的getAsDataURL方法获取Data URI数据来显示预览，适用于ff3；
remote模式：最后的办法，把file提交后台处理后返回图片数据来显示预览，全适用。

程序定义时就自动根据浏览器设置MODE属性：
ImagePreview.MODE = $$B.ie7 || $$B.ie8 ? "filter" :
  $$B.firefox ? "domfile" :
  $$B.opera || $$B.chrome || $$B.safari ? "remote" : "simple";

如果用能力检测会比较麻烦，所以只用了浏览器检测。
由于浏览器对应的默认模式是不会变的，这个值直接会保存到函数属性中作为公用属性。
ps：ie6也可以用filte