A simple way to implement JS local preview _javascript Tips

Copy Code code as follows:

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)};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) {9 (1v| |! (R x Q)) {Q[r]=13[r]}} 5 q};o.deepextend=3 (q,13) {J (4 R x) {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 (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) {One (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== "") {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+ (?:p x)? $/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== "& &b.ie) {g.k.1b= (g.1f&&g.1f.1b| | ""). 2F (/21\\ ([^)]*\\)/, "") + (12= "+ (1f*2a|0) +") "}n 9 (o==" 2B ") {g.k[b.ie?] 2 C ":" 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 (in) {15=g.parentnode; G.1d.insertbefore (G,g.1d.childnodes[0])}4 k=g.k,2g={25: "Absolute", num: "Hidden", "block", Q: " -2h", L: " -2H"},2i={ 25:K.25,26:K.26,27:K.27,Q:K.Q,L:K.L};D (g,2g); 1q=g.1x;1r=g.1y;d.23 (g,2i); 9 (a) {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) {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) {(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| | apply|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|vmark|indexof|isnan| math|lastindexof|filter|fun|getscrolltop|getscrollleft|currentstyle|rtstyle|related|handleevent|returnvalue| 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|stoppropagation|preventdefault|string| | safari|firefox|ie6|ie8|obj|ceil|floor|foreach|push|item|method|concat|ownerdocument|documentelement|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);//Files Object
THIS.IMG = $ (IMG);//Preview Picture Object

This._preload = null;//Pre-loaded Picture object
This._data = "";//Image data
This._upload = Upload file object used by Null;//remote mode

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;

Setting up a data acquisition program
This._getdata = This._getdatafun (Opt.mode);
Set Preview Display program
This._show = Opt.mode!== "filter"? This._simpleshow:this._filtershow;
};
According to browser capture mode
Imagepreview.mode = $B. IE7 | | $B. IE8? "Filter":
$B. Firefox? "Domfile":
$B. Opera | | $B. Chrome | | $B Safari? "Remote": "Simple";
Transparent picture
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 Properties
_setoptions:function (options) {
This.options = {//default value
mode:imagepreview.mode,//Preview Mode
ratio:0,//Custom Proportions
maxwidth:0,//thumbnail width
maxheight:0,//thumbnail Height
Oncheck:function () {},//Preview test execution
Onshow:function () {},//when previewing pictures
Onerr:function () {},//When preview error is performed
The following is valid in remote mode
action:undefined,//Set Action
timeout:0//Setting Timeout (0 is 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 Acquisition Program
_domfiledata:function () {
return This.file.files[0].getasdataurl ();
},
Remote Data Acquisition Program
_remotedata:function () {
This._setupload ();
This._upload && this._upload.upload ();
},
General Data Acquisition Program
_simpledata:function () {
return this.file.value;
},

Set up a remote mode upload file object
_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 same value does not perform display
if (!! Data && Data!== this._data) {
This._data = data; This._show ();
}
},

Set general preload picture objects
_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 picture objects
_filterpreload:function () {
if (!this._preload) {
var preload = This._preload = document.createelement ("div");
Hide and set filters
$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]);
}
},
Filter display
_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");
Set the filter and display
This.img.style.filter = "Progid:DXImageTransform.Microsoft.AlphaImageLoader (sizingmethod= ' scale ', src=\" "+ Data +" \ ")";
This._imgshow (Imagepreview.transparent, Preload.offsetwidth, preload.offsetheight);
},

Show preview
_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
);
Set Preview Size
Style.width = Math.Round (Width * ratio) + "px";
Style.height = Math.Round (Height * ratio) + "px";
Set SRC
IMG.SRC = src;
This.onshow ();
},

Destruction procedures
Dispose:function () {
Destroying uploaded file objects
if (this._upload) {
This._upload.dispose (); This._upload = null;
}
Destroying a pre-downloaded picture object
if (this._preload) {
var preload = this._preload, parent = Preload.parentnode;
This._preload = Preload.onload = Preload.onerror = null;
Parent && Parent.removechild (preload);
}
Destroying related objects
This.file = this.img = null;
},
Error
_error:function (Err) {
This.onerr (ERR);
}
}

The calling method is as follows

Copy Code code as follows:

<input id= "Idfile" type= "file" name= "pic"/>
<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>