上次写的简便无刷新文件上传系统最初的目的就是用来实现这个图片预览效果。
兼容：ie6/7/8, firefox 3.5.5
后台支持下还兼容：opera 10.10, safari 4.0.4, chrome 3.0
ps：兼容opera, safari和chrome需要后台支持，请下载实例测试。
程序说明
【基本原理】
图片预览主要包括两个部分：从file表单控件获取图像数据，根据数据显示预览图像。
程序的file和img属性就是用来保存file控件和显示预览图像的容器的，而img还必须是img元素。
程序有以下几种预览方式：
simple模式：直接从file的value获取图片路径来显示预览，适用于ie6；
filter模式：通过selection获取file的图片路径，再用滤镜来显示预览，适用于ie7/8；
domfile模式：调用file的getAsDataURL方法获取Data URI数据来显示预览，适用于ff3；
remote模式：最后的办法，把file提交后台处理后返回图片数据来显示预览，全适用。
程序定义时就自动根据浏览器设置MODE属性：
varImagePreview=function(file,img,options){
this.file=$$(file);//文件对象
this.img=$$(img);//预览图片对象
this._preload=null;//预载图片对象
this._data="";//图像数据
this._upload=null;//remote模式使用的上传文件对象
varopt=this._setOptions(options);
this.action=opt.action;
=opt.action;
this.timeout=opt.timeout;
this.ratio=opt.ratio;
this.maxWidth=opt.maxWidth;
this.maxHeight=opt.maxHeight;
this.onCheck=opt.onCheck;
this.onShow=opt.onShow;
this.onErr=opt.onErr;
//设置数据获取程序
this._getData=this._getDataFun(opt.mode);
//设置预览显示程序
this._show=opt.mode!=="filter"?this._simpleShow:this._filterShow;
};
//根据浏览器获取模式
ImagePreview.MODE=$$B.ie7||$$B.ie8?"filter":
$$B.firefox?"domfile":
$$B.opera||$$B.chrome||$$B.safari?"remote":"simple";
//透明图片
ImagePreview.TRANSPARENT=$$B.ie7||$$B.ie6?
"mhtml:"+document.scripts[document.scripts.length-1].getAttribute("src",4)+"!blankImage":
"data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
ImagePreview.prototype={
//设置默认属性
_setOptions:function(options){
this.options={//默认值
mode:ImagePreview.MODE,//预览模式
ratio:0,//自定义比例
maxWidth:0,//缩略图宽度
maxHeight:0,//缩略图高度
onCheck:function(){},//预览检测时执行
onShow:function(){},//预览图片时执行
onErr:function(){},//预览错误时执行
//以下在remote模式时有效
action:undefined,//设置action
timeout:0//设置超时(0为不设置)
};
return$$.extend(this.options,options||{});
},
//开始预览
preview:function(){
if(this.file&&false!==this.onCheck()){
this._preview(this._getData());
}
},
//根据mode返回数据获取程序
_getDataFun:function(mode){
switch(mode){
case"filter":
returnthis._filterData;
case"domfile":
returnthis._domfileData;
case"remote":
returnthis._remoteData;
case"simple":
default:
returnthis._simpleData;
}
},
//滤镜数据获取程序
_filterData:function(){
this.file.select();
try{
returndocument.selection.createRange().text;
}finally{document.selection.empty();}
},
//domfile数据获取程序
_domfileData:function(){
returnthis.file.files[0].getAsDataURL();
},
//远程数据获取程序
_remoteData:function(){
this._setUpload();
this._upload&&this._upload.upload();
},
//一般数据获取程序
_simpleData:function(){
returnthis.file.value;
},
//设置remote模式的上传文件对象
_setUpload:function(){
if(!this._upload&&this.action!==undefined&&typeofQuickUpload==="function"){
varoThis=this;
this._upload=newQuickUpload(this.file,{
onReady:function(){
this.action=oThis.action;this.timeout=oThis.timeout;
varparameter=this.parameter;
parameter.ratio=oThis.ratio;
parameter.width=oThis.maxWidth;
parameter.height=oThis.maxHeight;
},
onFinish:function(iframe){
try{
oThis._preview(iframe.contentWindow.document.body.innerHTML);
}catch(e){oThis._error("remoteerror");}
},
onTimeout:function(){oThis._error("timeouterror");}
});
}
},
//预览程序
_preview:function(data){
//空值或相同的值不执行显示
if(!!data&&data!==this._data){
this._data=data;this._show();
}
},
//设置一般预载图片对象
_simplePreload:function(){
if(!this._preload){
varpreload=this._preload=newImage(),oThis=this;
preload.onload=function(){oThis._imgShow(oThis._data,this.width,this.height);};
preload.onerror=function(){oThis._error();};
}
},
//一般显示
_simpleShow:function(){
this._simplePreload();
this._preload.src=this._data;
},
//设置滤镜预载图片对象
_filterPreload:function(){
if(!this._preload){
varpreload=this._preload=document.createElement("div");
//隐藏并设置滤镜
$$D.setStyle(preload,{
width:"1px",height:"1px",
visibility:"hidden",position:"absolute",left:"-9999px",top:"-9999px",
filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image')"
});
//插入body
varbody=document.body;body.insertBefore(preload,body.childNodes[0]);
}
},
//滤镜显示
_filterShow:function(){
this._filterPreload();
varpreload=this._preload,data=this._data;
try{
preload.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=data;
}catch(e){this._error("filtererror");return;}
//设置滤镜并显示
this.img.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='"+data+"')";
this._imgShow(ImagePreview.TRANSPARENT,preload.offsetWidth,preload.offsetHeight);
},
//显示预览
_imgShow:function(src,width,height){
varimg=this.img,style=img.style,
ratio=Math.max(0,this.ratio)||Math.min(1,
Math.max(0,this.maxWidth)/width||1,
Math.max(0,this.maxHeight)/height||1
);
//设置预览尺寸
style.width=Math.round(width*ratio)+"px";
style.height=Math.round(height*ratio)+"px";
//设置src
img.src=src;
this.onShow();
},
//销毁程序
dispose:function(){
//销毁上传文件对象
if(this._upload){
this._upload.dispose();this._upload=null;
}
//销毁预载图片对象
if(this._preload){
varpreload=this._preload,parent=preload.parentNode;
this._preload=preload.onload=preload.onerror=null;
parent&&parent.removeChild(preload);
}
//销毁相关对象
this.file=this.img=null;
},
//出错
_error:function(err){
this.onErr(err);
}
}
完整实例下载（asp与asp.net）SPAN style="COLOR: rgb(0,0,255)">this.timeout=opt.timeout;
this.ratio=opt.ratio;
this.maxWidth=opt.maxWidth;
this.maxHeight=opt.maxHeight;
this.onCheck=opt.onCheck;
this.onShow=opt.onShow;
this.onErr=opt.onErr;
//设置数据获取程序
this._getData=this._getDataFun(opt.mode);
//设置预览显示程序
this._show=opt.mode!=="filter"?this._simpleShow:this._filterShow;
};
//根据浏览器获取模式
ImagePreview.MODE=$$B.ie7||$$B.ie8?"filter":
$$B.firefox?"domfile":
$$B.opera||$$B.chrome||$$B.safari?"remote":"simple";
//透明图片
ImagePreview.TRANSPARENT=$$B.ie7||$$B.ie6?
"mhtml:"+document.scripts[document.scripts.length-1].getAttribute("src",4)+"!blankImage":
"data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
ImagePreview.prototype={
//设置默认属性
_setOptions:function(options){
this.options={//默认值
mode:ImagePreview.MODE,//预览模式
ratio:0,//自定义比例
maxWidth:0,//缩略图宽度
maxHeight:0,//缩略图高度
onCheck:function(){},//预览检测时执行
onShow:function(){},//预览图片时执行
onErr:function(){},//预览错误时执行
//以下在remote模式时有效
action:undefined,//设置action
timeout:0//设置超时(0为不设置)
};
return$$.extend(this.options,options||{});
},
//开始预览
preview:function(){
if(this.file&&false!==this.onCheck()){
this._preview(this._getData());
}
},
//根据mode返回数据获取程序
_getDataFun:function(mode){
switch(mode){
case"filter":
returnthis._filterData;
case"domfile":
returnthis._domfileData;
case"remote":
returnthis._remoteData;
case"simple":
default:
returnthis._simpleData;
}
},
//滤镜数据获取程序
_filterData:function(){
this.file.select();
try{
returndocument.selection.createRange().text;
}finally{document.selection.empty();}
},
//domfile数据获取程序
_domfileData:function(){
returnthis.file.files[0].getAsDataURL();
},
//远程数据获取程序
_remoteData:function(){
this._setUpload();
this._upload&&this._upload.upload();
},
//一般数据获取程序
_simpleData:function(){
returnthis.file.value;
},
//设置remote模式的上传文件对象
_setUpload:function(){
if(!this._upload&&this.action!==undefined&&typeofQuickUpload==="function"){
varoThis=this;
this._upload=newQuickUpload(this.file,{
onReady:function(){
this.action=oThis.action;this.timeout=oThis.timeout;
varparameter=this.parameter;
parameter.ratio=oThis.ratio;
parameter.width=oThis.maxWidth;
parameter.height=oThis.maxHeight;
},
onFinish:function(iframe){
try{
oThis._preview(iframe.contentWindow.document.body.innerHTML);
}catch(e){oThis._error("remoteerror");}
},
onTimeout:function(){oThis._error("timeouterror");}
});
}
},
//预览程序
_preview:function(data){
//空值或相同的值不执行显示
if(!!data&&data!==this._data){
this._data=data;this._show();
}
},
//设置一般预载图片对象
_simplePreload:function(){
if(!this._preload){
varpreload=this._preload=newImage(),oThis=this;
preload.onload=function(){oThis._imgShow(oThis._data,this.width,this.height);};
preload.onerror=function(){oThis._error();};
}
},
//一般显示
_simpleShow:function(){
this._simplePreload();
this._preload.src=this._data;
},
//设置滤镜预载图片对象
_filterPreload:function(){
if(!this._preload){
varpreload=this._preload=document.createElement("div");
//隐藏并设置滤镜
$$D.setStyle(preload,{
width:"1px",height:"1px",
visibility:"hidden",position:"absolute",left:"-9999px",top:"-9999px",
filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image')"
});
//插入body
varbody=document.body;body.insertBefore(preload,body.childNodes[0]);
}
},
//滤镜显示
_filterShow:function(){
this._filterPreload();
varpreload=this._preload,data=this._data;
try{
preload.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=data;
}catch(e){this._error("filtererror");return;}
//设置滤镜并显示
this.img.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='"+data+"')";
this._imgShow(ImagePreview.TRANSPARENT,preload.offsetWidth,preload.offsetHeight);
},
//显示预览
_imgShow:function(src,width,height){
varimg=this.img,style=img.style,
ratio=Math.max(0,this.ratio)||Math.min(1,
Math.max(0,this.maxWidth)/width||1,
Math.max(0,this.maxHeight)/height||1
);
//设置预览尺寸
style.width=Math.round(width*ratio)+"px";
style.height=Math.round(height*ratio)+"px";
//设置src
img.src=src;
this.onShow();
},
//销毁程序
dispose:function(){
//销毁上传文件对象
if(this._upload){
this._upload.dispose();this._upload=null;
}
//销毁预载图片对象
if(this._preload){
varpreload=this._preload,parent=preload.parentNode;
this._preload=preload.onload=preload.onerror=null;
parent&&parent.removeChild(preload);
}
//销毁相关对象
this.file=this.img=null;
},
//出错
_error:function(err){
this.onErr(err);
}
}
完整实例下载（asp与asp.net）
