JavaScript 图片上传预览效果

 随着浏览器安全性的提升，要实现图片预览也愈来愈困难。

不过群众的智慧是无限的，网上也有不少变通或先进的方法来实现。
兼容：ie6/7/8, firefox 3.5.5
后台支持下还兼容：opera 10.10, safari 4.0.4, chrome 3.0

【基本原理】

图片预览主要包括两个部分：从file表单控件获取图像数据，根据数据显示预览图像。
程序的file和img属性就是用来保存file控件和显示预览图像的容器的，而img还必须是img元素。

程序有如下几种预览方式：
simple模式：直接从file的value获取图片路径来显示预览，适用于ie6；
filter模式：经过selection获取file的图片路径，再用滤镜来显示预览，适用于ie7/8；
domfile模式：调用file的getAsDataURL方法获取Data URI数据来显示预览，适用于ff3；
remote模式：最后的办法，把file提交后台处理后返回图片数据来显示预览，全适用。

程序定义时就自动根据浏览器设置MODE属性：
 

ImagePreview.MODE  =  $$B.ie7  ||  $$B.ie8  ?   " filter "  :
    $$B.firefox  ?   " domfile "  :
    $$B.opera  ||  $$B.chrome  ||  $$B.safari  ?   " remote "  :  " simple " ;

若是用能力检测会比较麻烦，因此只用了浏览器检测。
因为浏览器对应的默认模式是不会变的，这个值直接会保存到函数属性中做为公用属性。
ps：ie6也能够用filter模式，不过它有更好的simple模式。

使用说明

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

new  ImagePreview( file, img );

可选参数用来设置系统的默认属性，包括：
属性:    默认值//说明
mode:  ImagePreview.MODE,//预览模式
ratio:  0,//自定义比例
maxWidth: 0,//缩略图宽度
maxHeight: 0,//缩略图高度
onCheck: function(){},//预览检测时执行
onShow:  function(){},//预览图片时执行
onErr:  function(){},//预览错误时执行
如下在remote模式时有效
action:  undefined,//设置action
timeout: 0//设置超时(0为不设置)
若是要使用remote模式必须设置一个action。

还提供了如下方法：
preview：执行预览操做；
dispose：销毁程序。

查看演示

ASP版下载       .NET版下载