Home > Web Front-end > JS Tutorial > body text

Simple implementation method of js local preview_javascript skills

WBOY
Release: 2016-05-16 16:59:31
Original
1216 people have browsed it

Copy code 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=cb)>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-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 = {
//Set default attributes
_setOptions: function(options) {
this.options = {//Default value
mode: ImagePreview.MODE,//Preview Mode
ratio: 0,//Custom ratio
maxWidth: 0,//Thumbnail width
maxHeight: 0,//Thumbnail height
onCheck: function(){},// Executed when previewing and detecting
onShow: function(){}, // Executed when previewing pictures
onErr: function(){}, // Executed when previewing errors
// The following is valid in remote mode
action: undefined,//Set action
timeout: 0//Set timeout (0 means 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 Get program
_domfileData: function() {
return this.file.files[0].getAsDataURL();
},
//Remote data get program
_remoteData: function() {
this._setUpload();
this._upload && this._upload.upload();
},
//General data acquisition program
_simpleData: function() {
return this.file.value;
},

//Set the upload file object 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.contentWindow.document.body.innerHTML );
}catch(e){ oThis._error("remote error"); }
},
onTimeout: function(){ oThis._error("timeout error"); }
});
}
},

//Preview program
_preview: function(data) {
//Null value or the same value will not be displayed
if ( !!data && data !== this._data ) {
this._data = data; this._show();
}
},

//Set the general preload 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;
},

//Set filter preload 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 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);
  }
}


调用方法如下
复制代码 代码如下:


<script><br>var ip = new ImagePreview( $$("idFile"), $$("idImg"), {<br> maxWidth: 200, maxHeight: 2000, action: "ImagePreview.ashx"<br>});<br>ip.img.src = ImagePreview.TRANSPARENT;<br>ip.file.onchange = function(){ ip.preview(); };<br></script>
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template