推荐JS图片预览，总结JavaScript图片预览效果的做法(附源码下载)(4)
使用技巧 一般来preview方法都是在onchange中调用，即选择文件后立即显示预览。 在不需要程序时最好执行一次dispose方法来销毁程序，防止内存泄漏等。 利
使用技巧
一般来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(){},//预览图片时执行
onErr: function(){},//预览错误时执行
以下在remote模式时有效
action: undefined,//设置action
timeout: 0//设置超时(0为不设置)
如果要使用remote模式必须设置一个action。
还提供了以下方法：
preview：执行预览操作；
dispose：销毁程序。
程序源码
代码
var ImagePreview = function(file, img, options) {
this.file = $$(file);//文件对象
this.img = $$(img);//预览图片对象
this._preload = null;//预载图片对象
this._data = "";//图像数据
this._upload = null;//remote模式使用的上传文件对象
var opt = this._setOptions(options);
this.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" :
return this._filterData;
case "domfile" :
return this._domfileData;
case "remote" :
return this._remoteData;
case "simple" :
default :
return this._simpleData;
}
},
//滤镜数据获取程序
_filterData: function() {
this.file.select();
try{
return document.selection.createRange().text;
} finally { document.selection.empty(); }
},
//domfile数据获取程序
_domfileData: function() {
return this.file.files[0].getAsDataURL();
},
//远程数据获取程序
_remoteData: function() {
this._setUpload();
this._upload && this._upload.upload();
},
//一般数据获取程序
_simpleData: function() {
return this.file.value;
},
//设置remote模式的上传文件对象
_setUpload: function() {
if ( !this._upload && this.action !== undefined && typeof QuickUpload === "function" ) {
var oThis = this;
this._upload = new QuickUpload(this.file, {
onReady: function(){
this.action = oThis.action; this.timeout = oThis.timeout;
var parameter = 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("remote error"); }
},
onTimeout: function(){ oThis._error("timeout error"); }
});
}
},
//预览程序
_preview: function(data) {
//空值或相同的值不执行显示
if ( !!data && data !== this._data ) {
this._data = data; this._show();
}
},
//设置一般预载图片对象
_simplePreload: function() {
if ( !this._preload ) {
var preload = this._preload = new Image(), 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 ) {
var preload = 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
var body = document.body; body.insertBefore( preload, body.childNodes[0] );
}
},
//滤镜显示
_filterShow: function() {
this._filterPreload();
var preload = this._preload, data = this._data;
try{
preload.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = data;
}catch(e){ this._error("filter error"); 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) {
var img = 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 ) {
var preload = 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);
}
}
this.file = $$(file);//文件对象
this.img = $$(img);//预览图片对象
this._preload = null;//预载图片对象
this._data = "";//图像数据
this._upload = null;//remote模式使用的上传文件对象
var opt = this._setOptions(options);
this.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" :
return this._filterData;
case "domfile" :
return this._domfileData;
case "remote" :
return this._remoteData;
case "simple" :
default :
return this._simpleData;
}
},
//滤镜数据获取程序
_filterData: function() {
this.file.select();
try{
return document.selection.createRange().text;
} finally { document.selection.empty(); }
},
//domfile数据获取程序
_domfileData: function() {
return this.file.files[0].getAsDataURL();
},
//远程数据获取程序
_remoteData: function() {
this._setUpload();
this._upload && this._upload.upload();
},
//一般数据获取程序
_simpleData: function() {
return this.file.value;
},
//设置remote模式的上传文件对象
_setUpload: function() {
if ( !this._upload && this.action !== undefined && typeof QuickUpload === "function" ) {
var oThis = this;
this._upload = new QuickUpload(this.file, {
onReady: function(){
this.action = oThis.action; this.timeout = oThis.timeout;
var parameter = 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("remote error"); }
},
onTimeout: function(){ oThis._error("timeout error"); }
});
}
},
//预览程序
_preview: function(data) {
//空值或相同的值不执行显示
if ( !!data && data !== this._data ) {
this._data = data; this._show();
}
},
//设置一般预载图片对象
_simplePreload: function() {
if ( !this._preload ) {
var preload = this._preload = new Image(), 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 ) {
var preload = 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
var body = document.body; body.insertBefore( preload, body.childNodes[0] );
}
},
//滤镜显示
_filterShow: function() {
this._filterPreload();
var preload = this._preload, data = this._data;
try{
preload.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = data;
}catch(e){ this._error("filter error"); 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) {
var img = 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 ) {
var preload = 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);
}
}
精彩图集
精彩文章