JavaScript 图片上传预览效果(2)
时间:2025-03-09
时间:2025-03-09
该文档说了怎么在页面做图片预览, 一步一步的
程序有以下几种预览方式:
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(); }
下一篇:花岗岩与大理石石材的清洗与除锈