js 本地預覽的簡單實作方法_javascript技巧

複製程式碼 程式碼如下:

// JavaScript 文件
eval(function(p,a,c,k,e,r){e=function(c){return(c35?String.fromCharCode(c 29):c.toString(36))};if('0'.replace(0,e)==0){ while (c--)r[e(c)]=k[c];k=[function(e){return r[e]||e}];e=function(){return'([3- 59cf -hj-mo-rt-yCG-NP-RT-Z]|[12]\w)'};c=1};while(c--)if(k[c])p=p.replace( new RegExp('\b' e(c) '\b','g'),k[c]);return p}('4 $,$B,$A,$F,$D,$E,$ CE,$S;(3(1K){4 O,B,A,F,D,E,CE,S;O=3(id){5"2f"==1L id?G.getElementById(id ) :id};O.emptyFunction=3(){};O.extend=3(Q,13,1v){9(1v===1K)1v=14;J(4 R x 13){9( 1v ||!(R x Q)){Q[R]=13[R]}}5 Q};O.deepextend=3(Q,13){J(4 R x 13){4 1j=13[ R ];9(Q===1j)繼續;9(1L 1j==="c"){Q[R]=M.callee(Q[R]||{},1j)}N{Q[ R ]=1j}}5 Q};O.wrapper=3(me,15){4 1M=3(){me.T(Z,M)};4 1N=3(){};1N.17 = 15.17;1M.17=新1N;5 1M};B=(3(U){4 b={18:/18/.P(U)&&!/1O/.P(U),1O:/ 1O /.P(U),2h:/webkit/.P(U)&&!/1P/.P(U),2i:/2i/.P(U),1P:/1P/.P(U) } ;4 1w="";J(4 i x b){9(b[i]){1w="2h"==i?"1k":i;1Q}}b.1k=1w&&1R("(?: " 1w ")[\\/: ]([\\d.] )").P(U)?1R.$1:"0";b.ie=b.18;b.2j=b.18&&1T( b .1k,10)==6;b.ie7=b.18&&1T(b.1k,10)==7;b.2k=b.18&&1T(b.1k,10)==8;5 b}) ( 1U.navigator.userAgent.toLowerCase());A=3(){4 p={isArray:3(2l){5 Object.17.toString.19(2l)==="[c 1V]"} , 1x:3(K,W,l){9(K.1x){5 1y(l)?K.1x(W):K.1x(W,l)}N{4 V=K.1l; l=1y(l)?0:l＜0?1z.2m(l) V:1z.2n(l);J(;l＜V;l ){9(K[l]===W)5 l}5-1}},1A:3(K,W,l){9(K.1A){5 1y(l)?K.1A(W):K.1A(W,l)}N{ 4 V＝K.1l；l＝1y(l)||l＞＝V-1≤V-1：l＜0≤1z.2m(l) V：1z.2n(l)；J(；l＞ ; -1;l--){9(K[l]===W)5 l}5-1}}};3 11(c,u){9(1K===c.1l){J ( 4 o x c){9(y===u(c[o],o,c))1Q}}N{J(4 i=0,V=c.1l;i

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 = {//預設值  ratio:  0,//自訂比例
  maxWidth: 0,//縮圖寬度
  maxHeight: 0,//縮圖高度
 預覽偵測時執行
  onShow:  function(){},//預覽圖片時執行
  onErr:  function(){},//預覽錯誤時執行
  //以下在使用🎜>  action:  undefined,//設定action
  timeout: 0//設定逾時(0設定為不設定)
    };
  
  },
  //開始預覽
  preview: function() {
 if ( this.file && false !== this.onCheck() ) {
_  . _getData() );
 }
  },

  //根據mode回傳資料取得程式
  _getDataFun: function(mode) {
 switch (M88) { "filter" :
   return this._filterData;
  case "domfile" :
   return this._domfileData;
 tecase" simple " :
  default :
   return this._simpleData;
 }
  },
  //濾鏡資料取得程式
  _filterData. select();
 try{
  return document.selection.createRange().text;
 } finally { document.selection.empty(); }
  },  _domfileData: function() {
 return this.file.files[0].getAsDataURL();
  },
  //遠端資料取得程式
  _remoteData: function(teData: function( {
 this._setUpload();
 this._upload && this._upload.upload();
  },
  //一般資料取得程式
  _simpleData: f🎜>  //一般資料取得程式
  _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, {
  this.action = oThis.action; this.timeout = oThis.timeout;
    var parameter = this.parameter;
    parameter.ratio = oThis.ratio;
 ¢ >    parameter.height = oThis.maxHeight;
   },
   onFinish: function(iframe){
    •＠🠎. );
}catch(e){ oThis._error("remote error"); }
   },
   onTimeout: function(){ oThis._error("timeout error"); }
 }
  },

  //預覽程式
  _preview: function(data) {
 //空值或相同的值不執行顯示
! data !== this._data ) {
  this._data = data; this._show();
 }
  },

  //設定一般預載圖片物件
_simplePreload: function() {
 if ( !this._preload ) {
  var preload = this._preload = new Image(), oThis = this,
 ._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 ) {
_onload;
 }
  },
  //一般顯示
  _simpleShow: function() {
 this._simplePreload();
 🎜> this._simplePreload();
 .thispreload.src; 🎜>  },

  //設定濾鏡預載圖片物件
  _filterPreload: function() {
 if ( !this._preload ) {
  var preload = .docum .createElement("div");
  //隱藏並設定濾鏡
  $D.setStyle( preload, {
   width: "1px", height: "1px",   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._.replace( '"%]/g, function(s){ return escape(escape(s)); });
 嘗試{
  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.this ) | Math Math.min( 1,
    Math.max( 0, this.maxWidth ) / 寬度|| 1,
    Math.max( 0, this.maxHeight ) / 高度 1 //設定頁尺寸
 style.width = Math.round( width *ratio ) "px";
 style.height = Math.round(height *ratio ) "px";
 / /設定src
 img.src = src;
 this.onShow();
  },

  // 調查程序
  dispose: function(>  // 調查程序
  dispose: function() {上傳檔案物件
 if ( this._upload ) {
  this._upload.dispose(); this._upload = null;
 }
 //調查預載圖片🎜>this  var preload = this._preload,parent = preload.parentNode;
  this ._preload = preload.onload = preload.onerror = null;
 > }
 //調查相關對象
 this.file = this.img = null;
  },
  //錯誤
  _error: function(err) {
錯誤
  。程式碼如下：



<script><BR>var ip = new ImagePreview( $$("idFile"), $$("idImg"), {<BR> maxWidth: 200, maxHeight: 2000 , action: "ImagePreview.ashx"<BR>});</script>

ip .img.src = ImagePreview.TRANSPARENT;
ip.file.onchange = function(){ ip.preview(); };