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

时间:2025-03-09

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

一般用在ie7/8,在file控件select后再通过selection对象获得文件本地路径。

此时file控件不能隐藏,否则不能被select,不过一般能选择文件就肯定能被select了。 确实要隐藏也可以在获取数据之后再隐藏。

domfile数据获取程序:

return this.file.files[0].getAsDataURL();

用getAsDataURL从file控件获取数据,这个方法暂时只有ff3支持。

远程数据获取程序:

this._setUpload();

this._upload && this._upload.upload();

用_upload上传文件对象把数据提交后台,根据返回的数据再显示。

这个方法不属于本地预览,是没有办法中的办法。

一般数据获取程序:

return this.file.value;

最原始的方法,现在只有ie6还支持从file的value直接获取本地路径。

获取数据后,作为_preview预览程序的参数,再进行处理:

if ( !!data && data !== this._data ) {

this._data = data; this._show();

}

首先排除空值或相同值的情况,再执行_show程序进行显示预览,其中_data属性用来保存当前的图片数据。

图片使用Data URI数据时可能会设置一个很大的src值,在ie8获取很大的src值会出现“无效指针”的错误。

使用_data属性保存这个值可以避免从src取值而触发这个错误。

远程数据获取程序没有返回值,因为它需要等待返回数据,在_preview中会自动排除。

【显示预览】

程序初始化时就会根据mode来设置_show预览显示程序:

this._show = opt.mode !== "filter" ? this._simpleShow : this._filterShow;

除了filter模式,都是使用_simpleShow显示程序来显示预览图片的。

里面会先调用_simplePreload方法设置一般预载图片对象:

代码

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

精彩图片

热门精选

大家正在看

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

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

支付方式:

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

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