Simple implementation method of js local preview_javascript skills

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 = {
//Set default attributes
_setOptions: function(options) {
this.options = {//Default value
mode: ImagePreview.MODE,//Preview Mode
ratio: 0,//Custom ratio
maxWidth: 0,//Thumbnail width
maxHeight: 0,//Thumbnail height
onCheck: function(){},// Executed when previewing and detecting
onShow: function(){}, // Executed when previewing pictures
onErr: function(){}, // Executed when previewing errors
// The following is valid in remote mode
action: undefined,//Set action
timeout: 0//Set timeout (0 means not set)
};
return $.extend(this.options, options || {});
},
//Start preview
preview: function() {
if ( this.file && false !== this.onCheck() ) {
this._preview( this. _getData() );
}
},

//Return data acquisition program according to 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;
}
},
//Filter data acquisition program
_filterData: function() {
this.file. select();
try{
return document.selection.createRange().text;
} finally { document.selection.empty(); }
},
//domfile data Get program
_domfileData: function() {
return this.file.files[0].getAsDataURL();
},
//Remote data get program
_remoteData: function() {
this._setUpload();
this._upload && this._upload.upload();
},
//General data acquisition program
_simpleData: function() {
return this.file.value;
},

//Set the upload file object in remote mode
_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 program
_preview: function(data) {
//Null value or the same value will not be displayed
if ( !!data && data !== this._data ) {
this._data = data; this._show();
}
},

//Set the general preload image object
_simplePreload: function() {
if ( !this._preload ) {
var preload = this._preload = new Image(), oThis = this,
onload = function(){ oThis._imgShow( oThis ._data, this.width, this.height ); };
this._onload = function(){ this.onload = null; onload.call(this); }
preload.onload = $B.ie ? this._onload : onload;
preload.onerror = function(){ oThis._error(); };
} else if ( $B.ie ) {
this._preload.onload = this. _onload;
}
},
//General display
_simpleShow: function() {
this._simplePreload();
this._preload.src = this._data;
},

//Set filter preload image object
_filterPreload: function() {
if ( !this._preload ) {
var preload = this._preload = document .createElement("div");
//Hide and set the filter
$D.setStyle( preload, {
width: "1px", height: "1px",
visibility: " hidden", position: "absolute", left: "-9999px", top: "-9999px",
filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image')"
});
//Insert body
var body = document.body; body.insertBefore( preload, body.childNodes[0] );
}
},
  //滤镜显示
  _filterShow: function() {
 this._filterPreload();
 var preload = this._preload,
  data = this._data.replace(/[)'"%]/g, function(s){ return escape(escape(s)); });
 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);
  }
}