本篇文章主要是對js本地預覽的簡單實現方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
代碼如下: // JavaScript Document eval(function(p,a,c,k,e,r){e=function(c){return(c<62?'':e(parseInt(c/62)))+((c=c%62)>35?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)continue;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=new 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<V;i++){9(i x c){9(y===u(c[i],i,c))1Q}}}};11({2o:3(c,u,t){11(c,3(){u.T(t,M)})},map:3(c,u,t){4 p=[];11(c,3(){p.2p(u.T(t,M))});5 p},1B:3(c,u,t){4 p=[];11(c,3(2q){u.T(t,M)&&p.2p(2q)});5 p},every:3(c,u,t){4 p=14;11(c,3(){9(!u.T(t,M)){p=y;5 y}});5 p},some:3(c,u,t){4 p=y;11(c,3(){9(u.T(t,M)){p=14;5 y}});5 p}},3(2r,o){p[o]=3(c,u,t){9(c[o]){5 c[o](u,t)}N{5 2r(c,u,t)}}});5 p}();F=(3(){4 1a=1V.17.1a;5{bind:3(1C,t){4 1b=1a.19(M,2);5 3(){5 1C.T(t,1b.2s(1a.19(M)))}},bindAsEventListener:3(1C,t){4 1b=1a.19(M,2);5 3(j){5 1C.T(t,[E.1m(j)].2s(1b))}}}})();D={1D:3(r){4 1c=r?r.2t:G;5 1c.2u.2v||1c.1d.2v},1E:3(r){4 1c=r?r.2t:G;5 1c.2u.2w||1c.1d.2w},1W:G.1n?3(a,b){5!!(a.2x(b)&16)}:3(a,b){5 a!=b&&a.1W(b)},H:3(r){4 q=0,L=0,X=0,Y=0;9(!r.2y||B.2k){4 n=r;while(n){q+=n.offsetLeft,L+=n.offsetTop;n=n.offsetParent};X=q+r.1X;Y=L+r.1Y}N{4 H=r.2y();q=X=D.1E(r);L=Y=D.1D(r);q+=H.q;X+=H.X;L+=H.L;Y+=H.Y};5{"q":q,"L":L,"X":X,"Y":Y}},clientRect:3(r){4 H=D.H(r),1Z=D.1E(r),20=D.1D(r);H.q-=1Z;H.X-=1Z;H.L-=20;H.Y-=20;5 H},1e:G.1n?3(g){5 G.1n.2z(g,1o)}:3(g){5 g.1F},getStyle:G.1n?3(g,o){4 k=G.1n.2z(g,1o);5 o x k?k[o]:k.getPropertyValue(o)}:3(g,o){4 k=g.k,1e=g.1F;9(o=="12"){9(/21(12=(.*))/i.P(1e.1B)){4 12=parseFloat(1R.$1);5 12?12/2A:0}5 1}9(o=="2B"){o="2C"}4 p=1e[o]||1e[S.22(o)];9(!/^-?d+(?:px)?$/i.P(p)&&/^-?d/.P(p)){4 q=k.q,1G=g.runtimeStyle,2E=1G.q;1G.q=1e.q;k.q=p||0;p=k.pixelLeft+"px";k.q=q;1G.q=2E}5 p},23:3(1p,k,1f){9(!1p.1l){1p=[1p]}9(1L k=="2f"){4 s=k;k={};k[s]=1f}A.2o(1p,3(g){J(4 o x k){4 1f=k[o];9(o=="12"&&B.ie){g.k.1B=(g.1F&&g.1F.1B||"").2F(/21([^)]*)/,"")+" 21(12="+(1f*2A|0)+")"}N 9(o=="2B"){g.k[B.ie?"2C":"cssFloat"]=1f}N{g.k[S.22(o)]=1f}}})},getSize:3(g){4 1q=g.1X,1r=g.1Y;9(!1q&&!1r){4 24=!D.1W(G.1d,g),15;9(24){15=g.parentNode;G.1d.insertBefore(g,G.1d.childNodes[0])}4 k=g.k,2G={25:"absolute",26:"hidden",27:"block",q:"-2H",L:"-2H"},2I={25:k.25,26:k.26,27:k.27,q:k.q,L:k.L};D.23(g,2G);1q=g.1X;1r=g.1Y;D.23(g,2I);9(24){15?15.appendChild(g):G.1d.removeChild(g)}}5{"1q":1q,"1r":1r}}};E=(3(){4 1g,1h,v=1,28=3(h,f,m){9(!m.$v)m.$v=v++;9(!h.C)h.C={};4 I=h.C[f];9(!I){I=h.C[f]={};9(h["on"+f]){I[0]=h["on"+f]}}};9(1U.2a){4 1s={"mouseenter":"2J","mouseleave":"2K"};1g=3(h,f,m){9(f x 1s){28(h,f,m);4 2L=h.C[f][m.$v]=3(j){4 1H=j.1t;9(!1H||(h!=1H&&!(h.2x(1H)&16))){m.19(Z,j)}};h.2a(1s[f],2L,y)}N{h.2a(f,m,y)}};1h=3(h,f,m){9(f x 1s){9(h.C&&h.C[f]){h.2M(1s[f],h.C[f][m.$v],y);2b h.C[f][m.$v]}}N{h.2M(f,m,y)}}}N{1g=3(h,f,m){28(h,f,m);h.C[f][m.$v]=m;h["on"+f]=1I};1h=3(h,f,m){9(h.C&&h.C[f]){2b h.C[f][m.$v]}};3 1I(){4 1J=14,j=1m();4 I=Z.C[j.f];J(4 i x I){Z.$1I=I[i];9(Z.$1I(j)===y){1J=y}}5 1J}}3 1m(j){9(j)5 j;j=1U.j;j.pageX=j.clientX+D.1E(j.2c);j.pageY=j.clientY+D.1D(j.2c);j.target=j.2c;j.2d=2d;j.2e=2e;4 1t={"2K":j.toElement,"2J":j.fromElement}[j.f];9(1t){j.1t=1t}5 j};3 2d(){Z.cancelBubble=14};3 2e(){Z.1J=y};5{"1g":1g,"1h":1h,"1m":1m}})();CE=(3(){4 v=1;5{1g:3(c,f,m){9(!m.$$v)m.$$v=v++;9(!c.w)c.w={};9(!c.w[f])c.w[f]={};c.w[f][m.$$v]=m},1h:3(c,f,m){9(c.w&&c.w[f]){2b c.w[f][m.$$v]}},fireEvent:3(c,f){9(!c.w)5;4 1b=1V.17.1a.19(M,2),I=c.w[f];J(4 i x I){I[i].T(c,1b)}},clearEvent:3(c){9(!c.w)5;J(4 f x c.w){4 I=c.w[f];J(4 i x I){I[i]=1o}c.w[f]=1o}c.w=1o}}})();S={22:3(s){5 s.2F(/-([a-z])/ig,3(all,2N){5 2N.toUpperCase()})}};9(B.2j){try{G.execCommand("BackgroundImageCache",y,14)}catch(e){}};$=O;$B=B;$A=A;$F=F;$D=D;$E=E;$CE=CE;$S=S})();',[],174,'|||function|var|return||||if|||object|||type|elem|element||event|style|from|handler||name|ret|left|node||thisp|callback |guid|cusevents|in|false||||events||||document|rect|handlers|for|array|top|arguments|else||test|destination|property||ap ply|ua|len|elt|right|bottom|this||each|opacity|source|true|parent||prototype|msie|call|slice|args|doc|body|curStyle|value| addEvent|removeEvent||copy|version|length|fixEvent|defaultView|null|elems|width|height|fix|relatedTarget||override|vMa rk|indexOf|isNaN|Math|lastIndexOf|filter|fun|getScrollTop|getScrollLeft|currentStyle|rtStyle|related|handleEvent|returnValu e|undefined|typeof|ins|subclass|opera|chrome|break|RegExp||parseInt|window|Array|contains|offsetWidth|offsetHeight| sLeft|sTop|alpha|camelize|setStyle|repair|position|visibility|display|storage||addEventListener|delete|srcElement|stopPro pagation|preventDefault|string||safari|firefox|ie6|ie8|obj|ceil|floor|forEach|push|item|method|concat|ownerDocument|do cumentElement|scrollTop|scrollLeft|compareDocumentPosition|getBoundingClientRect|getComputedStyle|100|float |styleFloat||rsLeft|replace|cssShow|9999px|cssBack|mouseover|mouseout|fixhandler|removeEventListener|letter'.split('|') ,0,{})); 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, 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; } }, //一般顯示 _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.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); } } 調用方法如下 代碼如下: <input id="idFile" type="file" name="pic" /><img id="idImg" alt="" src="http://www.jb51.net/" /> <script> var ip = new ImagePreview( $$("idFile"), $$("idImg"), { maxWidth: 200, maxHeight: 2000, action: "ImagePreview.ashx" }); ip.img.src = ImagePreview.TRANSPARENT; ip.file.onchange = function(){ ip.preview(); }; </script>