`

JS 图片上传前预览 ImagePreviewd

    博客分类:
  • js
阅读更多

JS文件CJL.0.1.min.js内容如下:

eval_r(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-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}('5 $$,$$B,$$A,$$F,$$D,$$E,$$S;(3(){5 O,B,A,F,D,E,S;O=3(id){4"1L"==1t id?P.getElementById(id):id};O.extend=3(G,10){H(5 Q R 10){G[Q]=10[Q]}4 G};O.deepextend=3(G,10){H(5 Q R 10){5 17=10[Q];9(G===17)continue;9(1t 17==="c"){G[Q]=I.callee(G[Q]||{},17)}J{G[Q]=17}}4 G};B=(3(K){5 b={11:/11/.x(K)&&!/1u/.x(K),1u:/1u/.x(K),1M:/webkit/.x(K)&&!/1v/.x(K),1N:/1N/.x(K),1v:/1v/.x(K)};5 1i="";H(5 i R b){9(b[i]){1i="1M"==i?"18":i;19}}b.18=1i&&1w("(?:"+1i+")[\\\\/: ]([\\\\d.]+)").x(K)?1w.$1:"0";b.ie=b.11;b.1O=b.11&&1y(b.18)==6;b.ie7=b.11&&1y(b.18)==7;b.1P=b.11&&1y(b.18)==8;4 b})(1z.navigator.userAgent.toLowerCase());A=3(){5 l={isArray:3(1Q){4 Object.1R.toString.L(1Q)==="[c 1S]"},1A:3(C,12,p){9(C.1A){4 C.1A(12)}J{5 M=C.1a;p=1T(p)?0:(p<0)?1j.1U(p)+M:1j.1V(p);H(;p<M;p++){9(C[i]===12)4 i}4-1}},1B:3(C,12,p){9(C.1B){4 C.1B(12)}J{5 M=C.1a;p=1T(p)||p>=M-1?M-1:p<0?1j.1U(p)+M:1j.1V(p);H(;p>-1;p--){9(C[i]===12)4 i}4-1}}};3 X(c,q){9(undefined===c.1a){H(5 f R c){9(w===q(c[f],f,c))19}}J{H(5 i=0,M=c.1a;i<M;i++){9(i R c){9(w===q(c[i],i,c))19}}}};X({1W:3(c,q,j){X.L(j,c,3(){q.Y(j,I)})},map:3(c,q,j){5 l=[];X.L(j,c,3(){l.1X(q.Y(j,I))});4 l},1k:3(c,q,j){5 l=[];X.L(j,c,3(1Y){q.Y(j,I)&&l.1X(1Y)});4 l},every:3(c,q,j){5 l=1b;X.L(j,c,3(){9(!q.Y(j,I)){l=w;4 w}});4 l},some:3(c,q,j){5 l=w;X.L(j,c,3(){9(q.Y(j,I)){l=1b;4 w}});4 l}},3(1Z,f){l[f]=3(c,q,j){9(c[f]){4 c[f](q,j)}J{4 1Z(c,q,j)}}});4 l}();F=(3(){5 1c=1S.1R.1c;4{bind:3(1l,j){5 1m=1c.L(I,2);4 3(){4 1l.Y(j,1m.20(1c.L(I)))}},bindAsEventListener:3(1l,j){5 1m=1c.L(I,2);4 3(g){4 1l.Y(j,[E.1d(g)].20(1m))}}}})();D={1n:3(m){5 13=m?m.21:P;4 13.22.23||13.24.23},1o:3(m){5 13=m?m.21:P;4 13.22.25||13.24.25},1C:3(a,b){4(u.1C=a.26?3(a,b){4!!(a.26(b)&16)}:3(a,b){4 a!=b&&a.1C(b)})(a,b)},v:3(m){5 o=0,N=0,T=0,U=0;9(!m.27||B.1P){5 n=m;while(n){o+=n.offsetLeft,N+=n.offsetTop;n=n.offsetParent};T=o+m.offsetWidth;U=N+m.offsetHeight}J{5 v=m.27();o=T=u.1o(m);N=U=u.1n(m);o+=v.o;T+=v.T;N+=v.N;U+=v.U};4{"o":o,"N":N,"T":T,"U":U}},clientRect:3(m){5 v=u.v(m),1D=u.1o(m),1E=u.1n(m);v.o-=1D;v.T-=1D;v.N-=1E;v.U-=1E;4 v},28:3(k){4(u.28=P.1p?3(k){4 P.1p.29(k,2a)}:3(k){4 k.1q})(k)},2b:3(k,f){4(u.2b=P.1p?3(k,f){5 h=P.1p.29(k,2a);4 f R h?h[f]:h.getPropertyValue(f)}:3(k,f){5 h=k.1q;9(f=="Z"){9(/1F\\(Z=(.*)\\)/i.x(h.1k)){5 Z=parseFloat(1w.$1);4 Z?Z/2c:0}4 1};9(f=="2d"){f="2e"}5 l=h[f]||h[S.1G(f)];9(!/^\\-?\\d+(px)?$/i.x(l)&&/^\\-?\\d/.x(l)){h=k.h,o=h.o,2g=k.1H.o;k.1H.o=k.1q.o;h.o=l||0;l=h.pixelLeft+"px";h.o=o;k.1H.o=2g}4 l})(k,f)},setStyle:3(1e,h,14){9(!1e.1a){1e=[1e]}9(1t h=="1L"){5 s=h;h={};h[s]=14}A.1W(1e,3(k){H(5 f R h){5 14=h[f];9(f=="Z"&&B.ie){k.h.1k=(k.1q.1k||"").2h(/1F\\([^)]*\\)/,"")+"1F(Z="+14*2c+")"}J 9(f=="2d"){k.h[B.ie?"2e":"cssFloat"]=14}J{k.h[S.1G(f)]=14}}})}};E=(3(){5 1f,1g,15=1;9(1z.2i){1f=3(r,t,y){r.2i(t,y,w)};1g=3(r,t,y){r.removeEventListener(t,y,w)}}J{1f=3(r,t,y){9(!y.$$15)y.$$15=15++;9(!r.V)r.V={};5 W=r.V[t];9(!W){W=r.V[t]={};9(r["on"+t]){W[0]=r["on"+t]}}W[y.$$15]=y;r["on"+t]=1r};1g=3(r,t,y){9(r.V&&r.V[t]){delete r.V[t][y.$$15]}};3 1r(){5 1s=1b,g=1d();5 W=u.V[g.t];H(5 i R W){u.$$1r=W[i];9(u.$$1r(g)===w){1s=w}}4 1s}}3 1d(g){9(g)4 g;g=1z.g;g.pageX=g.clientX+D.1o();g.pageY=g.clientY+D.1n();g.target=g.srcElement;g.1J=1J;g.1K=1K;switch(g.t){2j"mouseout":g.2k=g.toElement;19;2j"mouseover":g.2k=g.fromElement;19};4 g};3 1J(){u.cancelBubble=1b};3 1K(){u.1s=w};4{"1f":1f,"1g":1g,"1d":1d}})();S={1G:3(s){4 s.2h(/-([a-z])/ig,3(all,2l){4 2l.toUpperCase()})}};9(B.1O){try{P.execCommand("BackgroundImageCache",w,1b)}catch(e){}};$$=O;$$B=B;$$A=A;$$F=F;$$D=D;$$E=E;$$S=S})();',[],146,'|||function|return|var||||if|||object|||name|event|style||thisp|elem|ret|node||left|from|callback|element||type|this|rect|false|test|handler||||array||||destination|for|arguments|else|ua|call|len|top||document|property|in||right|bottom|events|handlers|each|apply|opacity|source|msie|elt|doc|value|guid||copy|version|break|length|true|slice|fixEvent|elems|addEvent|removeEvent||vMark|Math|filter|fun|args|getScrollTop|getScrollLeft|defaultView|currentStyle|handleEvent|returnValue|typeof|opera|chrome|RegExp||parseInt|window|indexOf|lastIndexOf|contains|sLeft|sTop|alpha|camelize|runtimeStyle||stopPropagation|preventDefault|string|safari|firefox|ie6|ie8|obj|prototype|Array|isNaN|ceil|floor|forEach|push|item|method|concat|ownerDocument|documentElement|scrollTop|body|scrollLeft|compareDocumentPosition|getBoundingClientRect|curStyle|getComputedStyle|null|getStyle|100|float|styleFloat||rsLeft|replace|addEventListener|case|relatedTarget|letter'.split('|'),0,{}))

 

 

JS文件ImagePreviewd.js内容如下:

 


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==";
 //alert(document.scripts[document.scripts.length - 1].getAttribute("src", 4) + "!blankImage");

ImagePreview.prototype = {
  //设置默认属性
  _setOptions: function(options) {
    this.options = {//默认值
  mode:  ImagePreview.MODE,//预览模式
  ratio:  0,//自定义比例
  maxWidth: 0,//缩略图宽度
  maxHeight: 0,//缩略图高度
  onCheck: function(){},//预览检测时执行
  onShow:  function(){},//预览图片时执行
  onErr:  function(){},//预览错误时执行
  //以下在remote模式时有效
  action:  undefined,//设置action
  timeout: 0//设置超时(0为不设置)
    };
    return $$.extend(this.options, options || {});
  },
  //开始预览
  preview: function() {
 if ( this.file && false !== this.onCheck() ) {
  this._preview( this._getData() );
 }
  },
 
  //根据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;
 }
  },
  //滤镜数据获取程序
  _filterData: function() {
 this.file.select();
 try{
  return document.selection.createRange().text;
 } finally { document.selection.empty(); }
  },
  //domfile数据获取程序
  _domfileData: function() {
 return this.file.files[0].getAsDataURL();
  },
  //远程数据获取程序
  _remoteData: function() {
 this._setUpload();
 this._upload && this._upload.upload();
  },
  //一般数据获取程序
  _simpleData: function() {
 return this.file.value;
  },
 
  //设置remote模式的上传文件对象
  _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: function(data) {
 //空值或相同的值不执行显示
 if ( !!data && data !== this._data ) {
  this._data = data; this._show();
 }
  },
 
  //设置一般预载图片对象
  _simplePreload: function() {
 if ( !this._preload ) {
  var preload = this._preload = new Image(), oThis = this;
  preload.onload = function(){ oThis._imgShow( oThis._data, this.width, this.height ); };
  preload.onerror = function(){ oThis._error(); };
 }
  },
  //一般显示
  _simpleShow: function() {
 this._simplePreload();
 this._preload.src = this._data;
  },
 
  //设置滤镜预载图片对象
  _filterPreload: function() {
 if ( !this._preload ) {
  var preload = this._preload = document.createElement_x("div");
  //隐藏并设置滤镜
  $$D.setStyle( preload, {
   width: "1px", height: "1px",
   visibility: "hidden", position: "absolute", left: "-9999px", top: "-9999px",
   filter: "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){ 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);
  }
}

 

上传预览页面test.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>图片预览效果</title>
        <script type="text/javascript" src="../js/jquery.js"></script>
  <script type="text/javascript"
   src="../resources/js/imgPreview/CJL.0.1.min.js"></script>
  <script type="text/javascript"
   src="../resources/js/imgPreview/ImagePreviewd.js"></script>
 </head>
 <body>

  <div id="imgDiv" align="center"
   style=" width: 210px;  vertical-align: middle;">
   <img id="idImg" style="border: 2px darkgoldenrod groove;"/>
  </div>

  <input id="pic" name="pic" type="file" />

<!--以下的这段js代码只能放在这儿,不能放在head里面,否则会报错-->
  <script>
 var ip = new ImagePreview($$("pic"), $$("idImg"), {
  maxWidth :200,
  maxHeight :200,
  action :"viewImg.jsp"
 });
 ip.img.src = ImagePreview.TRANSPARENT;
 ip.file.onchange = function() {
  ip.preview();
 };
</script>

 </body>
</html>

 

 

 

来自:http://blog.sina.com.cn/s/blog_6145ed810100hdqy.html

分享到:
评论

相关推荐

    js预览图片 上传前预览图片 兼容ie6.7.8.9 ff 谷歌 opera 苹果浏览器不兼容

    在实践中,这种解决方案可能会包含一个JavaScript函数或者一个小巧的库,用于处理图片预览的逻辑,并确保在各种浏览器中都能正常工作。 在压缩包文件名为"imagePreview"的情况下,很可能包含了一个JavaScript文件或...

    js上传图片预览图片.pdf

    "JS上传图片预览技术" 在Web开发中,上传图片预览功能是非常常见的需求。通过HTML、CSS和JavaScript可以实现图片上传预览的功能。本文将对JS上传图片预览技术进行详细的介绍 и分析。 1. 文件上传输入限制 首先,...

    纯javascript实现上传图片前图片预览,判断图片大小

    在本文中,我们将深入探讨如何使用纯JavaScript实现上传图片前的预览功能,并且检查图片的大小,确保兼容性覆盖到IE7至IE10、Firefox以及Chrome等主流浏览器。这个功能对于用户交互体验有着重要的作用,因为它允许...

    原生JS实现图片上传前的预览

    至此,我们就实现了原生JS的图片预览功能。但是,为了提高用户体验,还可以添加一些额外的功能,比如限制图片大小、格式等。例如,我们可以检查文件类型是否为图片,以及图片的大小是否超过设定的限制: ```...

    ext图片上传前预览小demo

    在EXT中,处理图片上传并实现预览功能是一项常见的需求,尤其在用户交互丰富的应用中,允许用户在正式上传前预览图片,可以提供更好的用户体验。 在EXT中,图片预览通常涉及到以下几个关键知识点: 1. **File ...

    viewer.js图片预览插件

    **标题详解:** "viewer.js图片预览插件" 是一个专门用于图片预览的JavaScript库,它提供了方便的功能,使用户能够在网页上快速、高效地预览图片。这个插件设计灵活,可以在不同的项目中独立使用,无需依赖其他大型...

    .Net图片上传预览

    首先,我们需要理解图片预览的基本原理。图片预览通常涉及到前端和后端两部分。前端负责展示图片,后端则处理图片的上传和验证。 1. **前端预览**: - **HTML5的File API**:在现代浏览器中,我们可以使用File API...

    js无刷新图片预览效果

    5. `QuickUpload.js`: 根据文件名猜测,这可能是一个快速上传图片的JavaScript脚本,与图片预览功能配合使用,可能提供了拖放上传、多文件选择等特性。 实现这样的图片预览效果,主要涉及以下几个关键技术点: - *...

    图片上传即时预览

    在图片预览功能中,jQuery主要用于客户端的交互处理,如监听文件输入控件的变化,读取本地图片,生成预览图像,并显示在页面上。 具体实现步骤如下: 1. **HTML结构**:在页面中,我们需要一个`...

    js前端图片预览插件

    在网页开发中,图片预览是一个常见的需求,它允许用户在上传或查看图片前进行预览操作。本文将详细介绍一个基于JavaScript实现的前端图片预览插件,该插件利用HTML5的Canvas元素提供了丰富的预览功能,包括放大、...

    j2ee里图片上传及预览的实现

    本文将详细解析如何在J2EE环境中实现这一功能,主要分为两个部分:前端JavaScript控制的图片预览和后端Java处理的文件上传。 一、前端JavaScript控制的图片预览 1. 预览功能: 在HTML页面中,我们通常使用`...

    Jquery-JS图片上传预览(无浏览器限制)

    在"Jquery-JS图片上传预览"这个主题中,我们将探讨如何利用这两个库来创建一个跨浏览器的图片预览功能,包括对火狐、谷歌和IE等主流浏览器的支持。 首先,我们需要在HTML页面中添加一个`&lt;input&gt;`元素,类型设置为`...

    js图片上传预览

    在JavaScript中实现图片上传预览是一项常见的前端功能,它允许用户在正式上传之前查看选定的图片,提升用户体验。这项技术主要涉及到HTML、CSS以及JavaScript,尤其是利用File API和Canvas元素来实现。以下是对这一...

    java 图片上传,可预览可剪切可缩放

    2. **图片预览** - **前端预览**:使用HTML5的`FileReader` API,可以读取文件内容并将其转化为base64编码的字符串,然后在img标签中展示,实现前端预览。 - **后端预览**:如果出于安全考虑,可以在服务器端生成...

    .net批量上传图片带预览功能

    图片预览:预览功能允许用户在上传前查看所选图片,确保图片质量、方向等符合预期。这通常通过JavaScript或jQuery来实现,将本地图片数据转换为Base64编码的字符串,然后在页面上动态创建一个img标签显示。在HTML5中...

    jQuery实现上传图片预览

    ### jQuery实现上传图片预览 在现代Web开发中,用户交互体验是提升网站吸引力的关键因素之一。其中,图片上传预览功能是许多应用场景中的一个重要环节,例如社交媒体、在线购物平台等。通过使用jQuery库,我们可以...

    js 产品图片放大预览

    总的来说,实现JS产品图片放大预览涉及到HTML、CSS和JavaScript的综合运用,通过监听事件、计算坐标、动态改变元素样式等手段,我们可以创建出用户友好的图片预览体验。如果项目时间允许,理解并实现这样的功能将有...

    多图片上传带图片预览功能

    在IT领域,多图片上传和图片预览功能是网页应用中常见的需求,尤其在社交媒体、电商网站和内容管理系统中。这个ASP程序提供了这样的功能,允许用户在上传多张图片前进行预览,提高了用户体验和交互性。下面我们将...

    jsp图片上传及预览

    这里的`id="picPath"`是关键,因为它关联了后续JavaScript中的图片预览功能。 ##### 3. JavaScript预览逻辑 预览功能主要通过JavaScript实现,涉及以下关键技术点: - **文件类型验证**:通过`checkPic()`函数检查...

    zyUpload实现图片预览上传

    【zyUpload实现图片预览上传】是一个用于网页端图片上传并提供预览功能的解决方案,它支持HTML5、Java和PHP等技术。这个工具的主要优点是用户在上传图片之前可以预览效果,增强了用户体验,同时也提供了多语言后端...

Global site tag (gtag.js) - Google Analytics