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

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

image：默认值。增大或减小对象的尺寸边界以适应图片的尺寸；

scale：缩放图片以适应对象的尺寸边界。

预载图片对象_preload，需要获取图片的原始尺寸，所以要用image方式。

而预览图片对象img，则要按设定尺寸显示图片，所以要用scale方式。

而src属性设置的路径还支持本地路径，是实现filter模式的关键所在。

还好滤镜并没有像file控件那样提高安全性，否则ie7/8就没有办法实现本地预览了。

【nsIDOMFile接口】

ff从3.0（或许更早）开始，就不能通过file控件的value属性获取文件本地路径，也不支持直接用本地路径显示图片。

不过欣喜的是，它同时也提供了nsIDOMFile接口，能更好地获取文件数据。

在ff的file控件有一个FileList对象，包含了带nsIDOMFile接口的File对象。

ps：FileList对象貌似是一个NodeList集合，但目前只能用第一个，可能是为了将来实现一个file控件选择多个文件的功能预留的。

这个File对象有三个获取文件数据的方法：

getAsText：获取文件的文本数据，可以通过参数设置编码；

getAsDataURL：获取文件的Data URI(URL?)数据；

getAsBinary：获取文件的二进制数据。

其中getAsDataURL获得的Data URI数据可以用于显示图片，_domfileData中就是用它来获取数据的。

File对象还支持两个属性：fileName（文件名，不包括路径）和fileSize（文件大小）。 相关具体说明参考mozilla的File和nsIDOMFile。

【Data URI 和 MHTML】

上面已经多次提到Data URI，详细介绍请看秦歌的“Data URI 和 MHTML”。

Data URI的主要作用是以字符代替数据，从而把文件“嵌”在代码里。

除了ie，其他浏览器基本都很好的支持了Data URI。

ie8也有限度地支持，详细参考msdn的data Protocol。

由于opera，safari和chrome需要remote模式的浏览器都支持Data URI，所以程序返回的是Data URI形式的数据。

相比返回路径的方法，返回Data URI不需要创建文件，还少一次HTTP请求。

ps：ie8只支持32k的Data URI数据，在ie8使用时要注意数据大小。

在filter模式需要一个透明图片来去掉img默认显示的小图标，一般的方法需要一个图片文件。 为了“省下”这个文件，可以使用Data URI来做一个1*1的透明图片：

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