【获取数据】

调用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返回数据获取程序：

switch (mode) {
    case "filter" :
        return this._filterData;
    case "domfile" :
        return this._domfileData;
    case "remote" :
        return this._remoteData;
    case "simple" :
    default :
        return this._simpleData;
}

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

this.file.select();
try{
    return document.selection.createRange().text;
} finally { document.selection.empty(); }

一般用在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中会自动排除。

出处：蓝色理想
责任编辑：bluehearts

上一页 JavaScript 图片预览效果 [2] 下一页 JavaScript 图片预览效果 [4]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。