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

时间: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(); }

JavaScript 图片上传预览效果(2).doc 将本文的Word文档下载到电脑

精彩图片

热门精选

大家正在看

× 游客快捷下载通道(下载后可以自由复制和排版)

限时特价:7 元/份 原价:20元

支付方式:

开通VIP包月会员 特价:29元/月

注:下载文档有可能“只有目录或者内容不全”等情况,请下载之前注意辨别,如果您已付费且无法下载或内容有问题,请联系我们协助你处理。
微信:fanwen365 QQ:370150219