`

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上传图片预览图片.pdf

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

    纯 js 实现得 图片上传预览插件

    综上所述,这个纯JS实现的图片上传预览插件利用了HTML5的File API和FileReader API,结合原生JavaScript的DOM操作和事件监听,实现了用户友好的图片预览功能。开发者可以根据实际需求进行定制,比如增加图片裁剪、...

    bootstrap图片上传和预览

    Bootstrap图片上传和预览是网页开发中的一个常见功能,它结合了美观的界面设计与实用的文件处理技术。Bootstrap是一个流行的前端开发框架,提供了一系列组件和工具,使得开发者能够快速构建响应式、移动设备优先的...

    fileupload上传图片前预览

    在ASP.NET开发中,FileUpload控件是用于处理用户上传文件的核心组件,特别是处理图片上传时,为了提供更好的用户体验,通常需要在用户正式提交前实现图片预览功能。这一功能可以减少用户因错误选择或不符合规格的...

    viewer.js图片预览插件

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

    C#上传图片预览11111

    本主题聚焦于"C#上传图片预览",这是一个常见的功能需求,无论是在网页上还是桌面应用中,用户通常希望在实际上传图片前能预览图片效果。这一功能不仅提升了用户体验,也减少了因误传错误图片而造成的困扰。 在C#中...

    图片上传及预览+时间水印

    其次,图片预览是用户在上传图片前能在界面上看到即将上传图片的效果,这增强了用户体验,减少了因上传错误图片而产生的额外操作。预览通常是在前端完成的,通过FileReader API读取图片数据,然后使用`DataURL`显示...

    js上传图片预览

    - 当`&lt;input type="file"&gt;`元素发生`change`事件时,调用`previewImage`函数进行图片预览。 5. **兼容性处理:** 为了确保代码在不同浏览器中的兼容性,本例提供了两种实现方式: - **对于现代浏览器**:使用...

    PHP上传图片带预览功能

    图片预览" style="display:none;max-width:300px;"&gt; ``` 然后,用JavaScript监听`change`事件,读取图片文件并显示预览: ```javascript document.getElementById('image').addEventListener('change', function(e...

    多文件预览上传-多图片预览上传

    "多文件预览上传-多图片预览上传"是一个专为JAVA开发的解决方案,它允许用户在实际上传之前预览文件,特别是图片,提高了用户体验并减少了错误的可能性。下面将详细解释这一功能的核心知识点: 1. **多文件选择与...

    图片上传和预览放大镜,上一张图片 下一张图片示例

    本文将深入探讨如何实现一个具备图片上传、预览、上一张/下一张切换以及放大镜效果的功能,以"图片上传和预览放大镜,上一张图片 下一张图片示例"为主题,基于zyupload.js库进行讨论。 首先,我们来理解zyupload.js...

    js实现图片上传预览功能

    js实现图片上传预览功能,自己稍微加工了一下,这个在IE9上面挺有意思的,alert(img.offsetWidth+"---"+img.offsetHeight);第一次输出每次都是28---30,第二次之后就会显示图片的实际大小,具体原理不懂,有明白的...

    js读取本地图片进行预览,上传服务器

    通过以上知识点,结合提供的`UploadImage`项目源码,你可以实现完整的本地图片预览和上传功能。请参考项目文档或博文链接(https://alisdame.iteye.com/blog/2163940)获取更详细的信息和示例代码。

    图片上传前预览

    在IT领域,图片上传前预览是一项常见的用户体验优化技术,特别是在网页应用中。它允许用户在实际上传图片之前查看图片的效果,确保上传的图片符合预期。这个过程涉及到前端开发中的多个知识点,包括HTML、CSS、...

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

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

    js图片上传预览

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

    vue组件js图片查看点击预览大图并下载高清大图到本地

    这个名为"vue组件js图片查看点击预览大图并下载高清大图到本地"的项目,是基于Vue 2.5.2版本实现的,它专注于为PC端用户提供图片预览和下载功能,但不支持IE浏览器。下面我们将详细探讨实现这些功能的关键知识点。 ...

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

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

    js 手机端 图片放大预览

    JavaScript(简称JS)作为网页动态效果的主要驱动力,提供了多种方法来实现手机端图片的放大预览功能。以下是一些核心知识点,帮助你理解和实现这个功能: 1. **事件监听**: - `touchstart`:当用户手指触摸屏幕...

    图片上传预览效果,很小的一个插件

    `uploads.js`则是插件的主要实现,包含了处理图片预览逻辑的JavaScript代码。通常,这个文件会包含事件监听器(如`change`事件,当用户选择文件时触发)、文件读取(使用`FileReader`对象的`readAsDataURL`方法)、...

Global site tag (gtag.js) - Google Analytics