jsローカルプレビュー_javascriptスキルの簡単な実装方法

コードをコピー コードは次のとおりです:

// 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=新しい 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 = {
//デフォルト属性を設定します
_setOptions: function(options) {
this.options = {//デフォルト値
mode: ImagePreview.MODE,//プレビューMode
rate: 0,//Custom rate
maxWidth: 0,//サムネイル幅
maxHeight: 0,//サムネイル高さ
onCheck: function(){},// プレビュー時に実行
onShow: function(){}, // 画像のプレビュー時に実行
onErr: function(){}, // エラーのプレビュー時に実行
// 以下はリモート モードで有効です
アクション: 未定義,//アクションを設定します
タイムアウト: 0//タイムアウトを設定します (0 は設定されていないことを意味します)
};
return $.extend(this.options, options || {}); 🎜> },
//プレビュー開始
review: function() {
if ( this.file && false !== this.onCheck() ) {
this._preview( this. _getData () );
}
},

//モードに応じてデータ取得プログラムを返す
_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 データを取得Program
_domfileData: function() {
return this.file.files[0].getAsDataURL();
},
//リモートデータ取得 Program
_remoteData: function() {
this._setUpload();
this._upload && this._upload.upload();
},
//汎用データ取得プログラム
_simpleData: function() {
return this.file.value;
},

//アップロード ファイル オブジェクトをリモート モードに設定します
_setUpload: function() {
if ( !this._upload && this.action !== 未定義 && typeof QuickUpload === "関数" ) {
var oThis = this;
this._upload = new QuickUpload(this.file, {
onReady: function(){
this.action = oThis.action; this.timeout = oThis.timeout;
var パラメータ = this.parameter;
パラメータ.ratio = oThis.ratio;
パラメータ.width = oThis.maxWidth;
parameter.height = oThis.maxHeight;
},
onFinish: function(iframe){
try{
oThis._preview( iframe.contentWindow.document.body.innerHTML );
}catch(e){ oThis._error("リモート エラー"); }
},
onTimeout: function(){ oThis._error("タイムアウト エラー") }
}); > }
},

//プログラムをプレビュー
_preview: function(data) {
//null値または同じ値は表示されません
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; }
preload.onload = $B。つまり? 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 "、位置: "絶対"、左: "-9999px"、上: "-9999px"、
フィルター: "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){ returnscape(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 ) / 幅 || 1,
Math.max( 0, this.maxHeight ) / 高さ || 1
);
//设置预览尺寸
style.width = Math.round( width * rate ) "px";
style.height = Math.round( height * rate ) "px";
/ /设置src
img.src = src;
this.onShow();
},

//销毁程序
destroy: 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>