推荐JS图片预览，总结JavaScript图片预览效果的做法(附源码下载)
本文讲解的JS预览图片效果兼容：ie6/7/8, firefox 3.5.5，后台支持下还兼容：opera 10.10, safari 4.0.4, chrome 3.0。
看下效果图：
ps：兼容opera, safari和chrome需要后台支持，请下载实例测试。
下面来分析：
【基本原理】
图片预览主要包括两个部分：从file表单控件获取图像数据，根据数据显示预览图像。
程序的file和img属性就是用来保存file控件和显示预览图像的容器的，而img还必须是img元素。
程序有以下几种预览方式：
simple模式：直接从file的value获取图片路径来显示预览，适用于ie6；
filter模式：通过selection获取file的图片路径，再用滤镜来显示预览，适用于ie7/8；
domfile模式：调用file的getAsDataURL方法获取Data URI数据来显示预览，适用于ff3；
remote模式：最后的办法，把file提交后台处理后返回图片数据来显示预览，全适用。
程序定义时就自动根据浏览器设置MODE属性：
$$B.firefox ? "domfile" :
$$B.opera || $$B.chrome || $$B.safari ? "remote" : "simple";
如果用能力检测会比较麻烦，所以只用了浏览器检测。
由于浏览器对应的默认模式是不会变的，这个值直接会保存到函数属性中作为公用属性。
ps：ie6也可以用filter模式，不过它有更好的simple模式。
【获取数据】
调用preview方法，就会执行预览程序：
this._preview( this._getData() );
}
在通过检测后，再调用_getData获取数据，并作为_preview的参数进入预览下一步。
程序初始化时就会根据mode来设置_getData数据获取程序：
this._getData = this._getDataFun(opt.mode);
mode的默认值是ImagePreview.MODE，也可以在可选参数中自定义。
由于兼容性问题，一般应保留默认值，除非是使用全兼容的remote模式。
在_getDataFun里面，根据mode返回数据获取程序：
case "filter" :
return this._filterData;
case "domfile" :
return this._domfileData;
case "remote" :
return this._remoteData;
case "simple" :
default :
return this._simpleData;
}
不同的模式有不同的数据获取程序：
滤镜数据获取程序：
try{
return document.selection.createRange().text;
} finally { document.selection.empty(); }
一般用在ie7/8，在file控件select后再用selection对象获得文件本地路径。
此时file控件不能隐藏，否则不能被select，不过一般能选择文件就肯定能被select了。
确实要隐藏也可以在获取数据之后再隐藏。
domfile数据获取程序：
用getAsDataURL从file控件获取数据，这个方法暂时只有ff3支持。
远程数据获取程序：
this._upload && this._upload.upload();
用_upload上传文件对象把数据提交后台，根据返回的数据再显示。
这个方法不属于本地预览，是没有办法中的办法。
一般数据获取程序：
最原始的方法，现在只有ie6还支持从file的value直接获取本地路径。
获取的数据作为参数，在_preview预览程序中进行预览：
this._data = data; this._show();
}
首先排除空值或相同值的情况，再执行_show预览显示程序，其中_data属性用来保存当前的图片数据。
图片使用Data URI数据时可能会设置一个很大的src值，在ie8获取很大的src值会出现“无效指针”的错误。
使用_data属性保存这个值可以避免从src获取值而触发这个错误。
远程数据获取程序没有返回值，因为它需要等待返回数据，在_preview中会自动排除。
