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

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

当使用removeChild时，移除元素的结构并没有发生变化，各个浏览器的效果都一样。

而使用innerHTML清除时，其他浏览器的效果跟removeChild一样，但在ie被移除的元素就只剩下一个“外壳”了。

个人推测，ie在使用innerHTML时，被移除的元素会变成一个个单独的元素，失去了彼此的联系。

形象点说就是removeChild是直接掰断树枝，还能继续嫁接使用，而innerHTML是把需要的树叶节点取下来，再把树枝烧掉。

ps：仅仅是推测，谁有官方资料请告诉我。

那么removeChild的好处是移除的元素能再次使用，兼容性好，不好的地方是ie会产生一个没用的碎片对象。

而innerHTML的好处是不会产生多余的碎片对象，方便高效，但在ie被移除的元素基本不能再用，有兼容性问题。

那就可以根据需要使用不同的方法了，至于防止内存泄漏用那个好，感觉是innerHTML，但没有更深入研究的话还说不清楚。

使用技巧

一般来preview方法都是在onchange中调用，即选择文件后立即显示预览。

在不需要程序时最好执行一次dispose方法来销毁程序，防止内存泄漏等。

利用ImagePreview.TRANSPARENT可以显示透明图片，而不需另外隐藏或增加文件。 第二个实例中的ResetFile是用来重置file控件的，详细参考这里file的reset。

而file控件样式设置详细参考这里的file样式。

asp版本使用Persits.Jpeg组件缩放图片，测试请先安装该组件。

使用说明

实例化时，有两个必要参数，分别是file控件对象和img元素的预览显示对象：

new ImagePreview( file, img );

可选参数用来设置系统的默认属性，包括：

属性: 默认值//说明

mode: ImagePreview.MODE,//预览模式

ratio: 0,//自定义比例

maxWidth: 0,//缩略图宽度

maxHeight: 0,//缩略图高度

onCheck: function(){},//预览检测时执行

onShow: function(){},//预览图片时执行