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

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

在_remoteData远程数据获取程序中，会调用_setUpload来设置上传文件对象。

如果设置了action，并存在QuickUpload函数，就会实例化一个上传文件对象保存到_upload中：

代码

这里使用的QuickUpload就是简便无刷新文件上传程序。

在onReady中设置参数，在onFinish中处理返回数据，onTimeout进行出错处理。 返回的数据可以是图片的地址或对应的Data URI数据，然后给_preview处理。

当然针对不同的后台输出，数据处理的方式也不同，可以按照需要修改。

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

【filter模式】

filter模式在_filterData程序中得到文件本地路径，但ie7/8都不允许直接使用本地路径显示图片。

不过还是可以通过滤镜，用本地路径来做预览图片效果。

filter模式使用_filterShow方法来显示预览图片。

里面先调用_filterPreload方法来设置滤镜预载图片对象。

跟一般预载图片对象不同，滤镜预载对象是用滤镜来显示图片，所以并不一定要图像元素。 程序就使用了div元素作为滤镜预载对象：

代码

在样式设置中隐藏元素并添加滤镜，要使滤镜生效width和height必须设置一个值。

由于要获取尺寸，只能用visibility来隐藏并插入body，关于AlphaImageLoader滤镜后面再介绍。

然后在_filterShow中预载图片：

try{

preload.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = data;

}catch(e){ this._error("filter error"); return; }

成功的话，再给img载入图片：

this.img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=\"" + data + "\")";

注意，如果路径中有“)”，“%”这类字符的话，直接拼接到滤镜字符串中会出现类似sql注入的问