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

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

题。

程序会先对这些敏感字符进行escape编码：

data = this._data.replace(/[)'"%]/g, function(s){ return escape(escape(s)); });

为什么要做两次escape编码呢？测试时发现“%”只转一次的话，遇到“%40”之类的字符时还是会出问题。

所以我推测，字符在使用前会进行两次unescape解码，于是对应的做两次escape编码果然没问题了。

虽然预载对象是直接设置滤镜的src属性，但也有“%”的拼接字问题，所以也要escape编码。 ps：虽然单引号和双引号这里并不是必要，还是一起替换掉安心点。

还要注意预览对象不要用filters.item的方式设置滤镜。

因为元素插入文档之前，并不能通过filters.item获取滤镜对象，但能通过style预先设置filter。 所以在不确定元素位置的情况下，只能用style来设置filter了。

最后调用_imgShow设置尺寸：

this._imgShow( ImagePreview.TRANSPARENT, preload.offsetWidth, preload.offsetHeight );

由于img是一个图片对象，默认会显示一个小图标，为了去掉这个小图标，可以让它显示一个透明图片。

程序传递了ImagePreview.TRANSPARENT来设置透明图片，具体数据在Data URI 和 MHTML再说明。

ps：当然也可以在filter模式用div做预览图片对象就没有小图标了，但这样兼容起来会麻烦很多。

【AlphaImageLoader滤镜】

filter模式使用的是AlphaImageLoader滤镜。

它的作用是在对象容器边界内，在对象的背景和内容之间显示一张图片。

如果载入的是png图片，其透明度会被支持，因此它更多地用来解决png的兼容问题。

详细参考msdn的AlphaImageLoader Filter和“Microsoft.AlphaImageLoader滤镜讲解”。 它包括三个属性：enabled（滤镜是否激活），sizingMethod（图像显示方式）和src（图像路径）。

程序主要使用后面两个属性。

sizingMethod有三种方式：

crop：剪切图片以适应对象尺寸；