Simple implementation of js local preview _ javascript skills

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-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

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 ("p ");
// 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:

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