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版下载

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章