JavaScript 图片上传预览效果(2)

该文档说了怎么在页面做图片预览, 一步一步的

程序有以下几种预览方式：

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也可以用filter模式，不过它有更好的simple模式。

【获取数据】

调用preview方法，就会执行预览程序：

if ( this.file && false !== this.onCheck() ) {

this._preview( this._getData() );

}

在通过检测后，再调用_getData获取数据，并作为_preview的参数进入下一步。

程序初始化时就会根据mode来设置_getData数据获取程序：

this._getData = this._getDataFun(opt.mode);

mode的默认值是ImagePreview.MODE，也可以在可选参数中自定义。

由于兼容性问题，一般应保留默认值，除非是使用全兼容的remote模式。

在_getDataFun里面，根据mode返回数据获取程序：

代码

不同的模式有不同的数据获取程序：

滤镜数据获取程序：

this.file.select();

try{

return document.selection.createRange().text;

} finally { document.selection.empty(); }