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

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

预载图片对象保存在_preload属性中，主要用来判断图像能否加载成功并获取图片原始尺寸。 要实现这些功能使用Image对象就足够了。

在onload中执行_imgShow显示预览，在onerror中进行出错处理。

ps：ff、chrome和safari的图片对象还有naturalHeight和naturalWidth属性可以获取图片的原始尺寸，即使图片尺寸已经修改过。

这里要注意ie6/7的gif图片载入bug，测试以下代码：

代码

一般图片执行一次onload后并不会重复执行，但ie6/7的gif每次循环播放都会执行一次onload。

ps：ie8在非标准（怪辟）模式下也有相同的问题。

可以在onload的时候，判断complete是否为false来判断是否重复加载。

ps：除了ie，其他浏览器在onload时complete就已经为true了。

问题是选择另一个图片时这个complete仍然是true，这样就没有意义了。

所以只好在onload里面重置onload为null，并在每次选择文件重设onload了。

然后设置_preload的src预载图片，如果成功预载就会执行_imgShow显示预览。

要注意src的设置要在onload/onerror的设置之后，否则设置之前就加载完成的话就触发不了事件了。

_imgShow需要三个参数，包括要预览图片的src值，图片原始宽度和图片原始高度。 在_imgShow里面首先设置预览图片的尺寸：

代码

这里的关键是获取ratio比例值，如果自定义的ratio大于0就直接使用自定义的比例，否则就根据参数自动计算。

自动计算首先要确保maxWidth最大宽度和maxHeight最大高度大于等于0。

然后分别跟原始宽高做“/”运算得到比例，如果比例为0表示不限制，那么比例就自动改为1。 最后取比较小的比例来计算，程序设定了比例最大值为1，这样就不会自动放大图片了。 当然比例的计算可以根据需要自行修改。

ps：style的优先级比属性(width/height)高，所以要用style设置。

最后设置img的src就可以实现预览了。

【remote模式】

remote模式会先提交file控件到后台，通过返回的数据来显示图片。

它跟其他模式最大的区别就是获取数据的部分。