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

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

支持Data URI的情况下，只要把img的src设置为这个值就可以显示一个透明图片了。 虽然ie6/7不支持Data URI，但还有mhtml可以使。

在ImagePreviewd.js开头有一段注释了的代码：

代码

其中boundary的值是分隔符标识，说明用于分隔数据段的字符。

Content-Location说明关联引用位置，可以用作数据段的标识。

Content-Transfer-Encoding就是字符编码形式。

后面的代码就是1*1的透明图片的base64编码数据。

然后在代码中这样调用（例如设置img元素的src属性）：

mhtml:文件完整路径!blankImage

就可以链接到一个透明图片了。

接着就要解决如何获得script（js文件）的完整路径（包含http开头的路径）的问题了。 首先要在脚本运行时获取，当前运行的script肯定是document.scripts的最后一个： document.scripts[document.scripts.length - 1]

ps：ff不支持document.scripts，可以用getElementsByTagName("script")来兼容。 接着可以利用getAttribute从src获取script的完整路径：

document.scripts[document.scripts.length - 1].getAttribute("src", 4)

ie6/7的getAttribute支持第二个参数，设为4表示返回完整路径的url地址，详细参考msdn的getAttribute Method。

结合Data URI 和 MHTML可以这样得到透明图片数据：

ImagePreview.TRANSPARENT = $$B.ie7 || $$B.ie6 ?

"mhtml:" + document.scripts[document.scripts.length - 1].getAttribute("src", 4) + "!blankImage" :

"data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";

使用时要注意：

脚本必须单独另存为一个文件，作为mhtml需要的文件路径。

要自动获取完整路径需要用script标签链接文件。

【超空间】

程序还有一个dispose方法用于销毁程序。

包括这几个部分：