JavaScript教程:详细解析网页图片预览效果(5)

【remote模式】

remote模式会先提交file控件到后台，通过返回图片数据来显示图片。
它跟其他模式最大的区别就是获取数据的部分。

在_remoteData远程数据获取程序中，会调用_setUpload来设置上传文件对象。
如果设置了action，并存在QuickUpload函数，就会进行实例化一个上传文件对象保存到_upload中：

var oThis = this;
this._upload = new QuickUpload(this.file, {
    onReady: function(){
        this.action = oThis.action; this.timeout = oThis.timeout;
        var parameter = this.parameter;
        parameter.ratio = oThis.ratio;
        parameter.width = oThis.maxWidth;
        parameter.height = oThis.maxHeight;
    },
    onFinish: function(iframe){
        try{
            oThis._preview( iframe.contentWindow.document.body.innerHTML );
        }catch(e){ oThis._error("remote error"); }
    },
    onTimeout: function(){ oThis._error("timeout error"); }
});

这里使用的QuickUpload就是简便无刷新文件上传程序。
在onReady中设置参数，在onFinish中处理返回数据，onTimeout进行出错处理。
返回的数据可以是图片的地址或对应Data URI数据，然后给_preview处理。
当然针对不同的后台输出，数据处理的方式也不同，可以按照需要修改。

后台最好先根据传递的参数缩小图片，尽量减少返回数据来提高预览速度。