Simple implementation of js local Preview

Simple implementation of js local Preview

This article mainly introduces the simple implementation method of js local preview. If you need it, you can refer to it and hope to help you.

The Code is 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 (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-rjrt-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 (1 K) {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, 1 v) {9 (1 v = 1 K) 1 v = 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 1 M = 3 () {me. T (Z, M)}; 4 1N = 3 () {}; 1N. 17 = 15.17; 1 m. 17 = new 1N; 5 1 M}; B = (3 (U) {4 B = {18:/18 /. P (U )&&! /1O/. P (U), 1O:/1O/. P (U), 2 h:/webkit/. P (U )&&! /1 P /. P (U), 2i:/2i /. P (U), 1 P:/1 P /. P (U)}; 4 1 w = ""; J (4 I x B) {9 (B [I]) {1 w = "2 h" = I? "1 k": I; 1Q }} B .1k = 1 w & 1R ("(?: "+ 1 w +") [/:] ([d.] +) "). P (U )? 1R. $1: "0"; B. ie = B .18; B .2j = B .18 & 1 T (B .1k, 10) = 6; B. ie7 = B .18 & 1 T (B .1k, 10) = 7; B .2k = B .18 & 1 T (B .1k, 10) = 8; 5 B}) (1U. navigator. userAgent. toLowerCase (); A = 3 () {4 p = {isArray: 3 (2l) {5 Object.17.toString. 19 (2l) = "[c 1 V]"}, 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. 2 m (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. 2 m (l) + V: 1z. 2n (l); J (; l>-1; l --) {9 (K [l] = W) 5 l} 5-1 }}}; 3 11 (c, u) {9 (1 K = 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.2q (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. 2 s (1a. 19 (M) }}, bindAsEventListener: 3 (1C, t) {4 1b = 1a. 19 (M, 2); 5 3 (j) {5 1C. T (t, [E.1m (j)]. 2 s (1b) }}}) (); D = {1D: 3 (r) {4 1c = r? R.2t: G; 5 1c. 2u. 2v | 1c. 1d. 2 v}, 1E: 3 (r) {4 1c = r? R.2t: G; 5 1c. 2u. 2w | 1c. 1d. 2 w}, 1 W: G.1n? 3 (a, B) {5 !! (A.2x (B) & 16)}: 3 (a, B) {5! = 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/2 A: 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; 1 GB. q = 1e. q; k. q = p | 0; p = k. pixelLeft + "px"; k. q = q; 1g. q = 2E} 5 p },23:3 (1 p, k, 1f) {9 (! 1p. 1l) {1 p = [1 p]} 9 (1L k = "2f") {4 s = k; k = {}; k [s] = 1f} A.2o (1 p, 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: "-2 H", L: "-2 H"}, 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, 1 h, 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 1 s = {"mouseenter": "2J", "mouseleave": "2 K"}; 1g = 3 (h, f, m) {9 (f x 1 s) {28 (h, f, m); 4 2L = h. C [f] [m. $ v] = 3 (j) {4 1 H = j.1t; 9 (! 1 h | (h! = 1 H &&! (H.2x (1 H) & 16) {m.19 (Z, j) }}; h.2a (1 s [f], 2L, y)} N {h.2a (f, m, y) }}; 1 h = 3 (h, f, m) {9 (f x 1 s) {9 (h. C & h. C [f]) {H.264 (1 s [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}; 1 h = 3 (h, f, m) {9 (h. C & h. C [f]) {2b h. C [f] [m. $ v] }}; 3 1I () {4 1J = 14, j = 1 m (); 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 1 m (j) {9 (j) 5 j; j = 1U. j; j. pageX = j. clientX + D.1E (j.2c); j. pageY = J.clientyuncd.1d(j.2c00000000j.tar get = j.2c; j.2d = 2d; j.2e = 2e; 4 1 t = {"2 K": j. toElement, "2J": j. fromElement} [j. f]; 9 (1 t) {j.1t = 1 t} 5 j}; 3 2d () {Z. cancelBubble = 14}; 3 2e () {Z.1J = y}; 5 {"1g": 1g, "1 h": 1 h, "1 m ": 1 m }}) (); 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}, 1 h: 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(%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%; $ 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); // file object

This. img = $ (img); // preview the image object

 

This. _ preload = null; // preload the image object

This. _ data = ""; // image data

This. _ upload = null; // upload object used in 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;

 

// Set the data retrieval program

This. _ getData = this. _ getDataFun (opt. mode );

// Sets the Preview display program.

This. _ show = opt. mode! = "Filter "? This. _ simpleShow: this. _ filterShow;

};

// Obtain the mode based on the browser

ImagePreview. MODE = $ B. ie7 | $ B. ie8? "Filter ":

$ B. firefox? "Domfile ":

$ B. opera | $ B. chrome | $ B. safari? "Remote": "simple ";

// Transparent image

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 the default attribute

_ SetOptions: function (options ){

This. options = {// Default Value

Mode: ImagePreview. MODE, // Preview mode

Ratio: 0, // custom ratio

MaxWidth: 0, // The width of the thumbnail.

MaxHeight: 0, // The height of the thumbnail.

OnCheck: function () {}, // executed during preview Detection

OnShow: function () {}, // execute when previewing the image

OnErr: function () {}, // execute when a preview error occurs.

// The following is valid in remote mode:

Action: undefined, // set action

Timeout: 0 // set timeout (0 is not set)

};

Return $. extend (this. options, options || {});

},

// Start previewing

Preview: function (){

If (this. file & false! = This. onCheck ()){

This. _ preview (this. _ getData ());

}

},

 

// The data retrieval program is returned based on the 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 Retrieval Program

_ RemoteData: function (){

This. _ setUpload ();

This. _ upload & this. _ upload. upload ();

},

// General Data Acquisition Program

_ SimpleData: function (){

Return this. file. value;

},

 

// Sets the object to be uploaded 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.content+doc ument. body. innerHTML );

} Catch (e) {oThis. _ error ("remote error ");}

},

OnTimeout: function () {oThis. _ error ("timeout error ");}

});

}

},

 

// Preview the program

_ Preview: function (data ){

// Do not display null values or the same values

If (!! Data & data! = This. _ data ){

This. _ data = data; this. _ show ();

}

},

 

// Set a general prepaid 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;

},

 

// Sets the filter to preload the 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 the 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 (s ));});

Try {

Preload. filters. item ("DXImageTransform. Microsoft. AlphaImageLoader"). src = data;

} Catch (e) {this. _ error ("filter error"); return ;}

// Set the filter and display it

This. img. style. filter = "progid: DXImageTransform. Microsoft. AlphaImageLoader (sizingMethod

= 'Scale', src = "" + data + "")";

This. _ imgShow (ImagePreview. TRANSPARENT, preload. offsetWidth, preload. offsetHeight );

},

 

// Display 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 ();

},

 

// Destroy the program

Dispose: function (){

// Destroy the uploaded object

If (this. _ upload ){

This. _ upload. dispose (); this. _ upload = null;

}

// Destroy the prepaid image object

If (this. _ preload ){

Var preload = this. _ preload, parent = preload. parentNode;

This. _ preload = preload. onload = preload. onerror = null;

Parent & parent. removeChild (preload );

}

// Destroy related objects

This. file = this. img = null;

},

// Error

_ Error: function (err ){

This. onErr (err );

}

}

 

 

The call method is as follows:

The Code is 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>