jquery 图片上传本地预览V1.2

基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari

代码进行小小的压缩 如果看源码 自己解压就行了

版本已升级  修复jquery版本问题  支持任意jquery版本

代码在线演示地址：http://jquery.decadework.com/

插件下载地址：http://jquery.decadework.com/plugin/uploadPreview.zip

 

标签： <无>

 

代码片段(3)[全屏查看所有代码]

1. [代码]uploadPreview.min.js     

?

1 2 3 4 5 6 7 8

/* *作者:周祥 *时间:2014年08月19日 *介绍:图片上传预览插件 兼容浏览器(IE 谷歌 火狐) 不支持safari *网站:http://jquery.decadework.com *版本:1.2 */ eval(function (p, a, c, k, e, d) { e = function (c) { return (c < a ? "" : e(parseInt(c / a))) + ((c = c % a) > 35 ? String.fromCharCode(c + 29) : c.toString(36)) }; if (! '' .replace(/^/, String)) { while (c--) d[e(c)] = k[c] || e(c); k = [function (e) { return d[e] } ]; e = function () { return '\\w+' }; c = 1; }; while (c--) if (k[c]) p = p.replace( new RegExp( '\\b' + e(c) + '\\b' , 'g' ), k[c]); return p; } ( 'A.T.B({N:g(2){9 6=3,y=$(3);2=A.B({f:"M",D:E,C:E,k:["L","Q","P","S","R"],w:g(){}},2||{});6.n=g(a){9 8=W;5(4.d!=l){8=4.d(a)}h 5(4.t!=l){8=4.t.d(a)}h 5(4.r!=l){8=4.r.d(a)}v 8};y.V(g(){5(3.j){5(!U("\\.("+2.k.x("|")+")$","i").O(3.j.J())){I("H,K"+2.k.x("，")+"X");3.j="";v 1g}5(1h.1i.1d("1e")>-1){1f{$("#"+2.f).u(\'7\',6.n(3.z[0]))}1n(e){9 7="";9 b=$("#"+2.f);9 c=b.o("c")[0];6.1m();5(1l!=1k){4.o.m.1j.1c()}h{6.12()}7=m.G.13().14;m.G.11();b.Y();b.o("c").Z({\'10\':\'19:s.p.q(1a=1b)\',\'18\':2.D+\'F\',\'15\':2.C+\'F\'});c.16.17("s.p.q").7=7}}h{$("#"+2.f).u(\'7\',6.n(3.z[0]))}2.w()}})}});' , 62, 86, '||opts|this|window|if|_0|src|url|var|file|obj|div|createObjectURL||Img|function|else||value|ImgType|undefined|document|getObjectURL|parent|Microsoft|AlphaImageLoader|webkitURL|DXImageTransform|URL|attr|return|Callback|join|_1|files|jQuery|extend|Height|Width|100|px|selection|选择文件错误|alert|toLowerCase|图片类型必须是|gif|ImgPr|uploadPreview|test|jpg|jpeg|png|bmp|fn|RegExp|change|null|中的一种|hide|css|filter|empty|blur|createRange|text|height|filters|item|width|progid|sizingMethod|scale|focus|indexOf|MSIE|try|false|navigator|userAgent|body|self|top|select|catch' .split( '|' ), 0, {}))

2. [代码]uploadPreview.js     

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80

/* *作者:周祥 *时间:2014年08月19日 *介绍:图片上传预览插件 兼容浏览器(IE 谷歌 火狐) 不支持safari 当然如果是使用这些内核的浏览器都兼容 *网站:http://jquery.decadework.com http://www.oschina.net/code/snippet_1049351_26784 *QQ:200592114 *版本:1.2 *参数说明: Img:图片ID;Width:预览宽度;Height:预览高度;ImgType:支持文件类型;Callback:选择文件后回调方法; *插件说明: 基于JQUERY扩展,需要引用JQUERY库。 *使用方法:  <div> <img id="ImgPr" width="120" height="120" /></div> <input type="file" id="up" />    把需要进行预览的IMG标签外 套一个DIV 然后给上传控件ID给予uploadPreview事件    $("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120, ImgType: ["gif", "jpeg", "jpg", "bmp", "png"], Callback: function () { }});      另外注意一下 使用该插件预览图片 选择文件的按钮在IE下不能是隐藏的 你可以换种方式隐藏 比如:top left 负几千像素    v1.2:更新jquery1.9以上版本 插件报错BUG */ jQuery.fn.extend({      uploadPreview: function (opts) {          var _self = this , _this = $( this );          opts = jQuery.extend({              Img: "ImgPr" ,              Width: 100,              Height: 100,              ImgType: [ "gif" , "jpeg" , "jpg" , "bmp" , "png" ],              Callback: function () { }          }, opts || {});          _self.getObjectURL = function (file) {              var url = null ;              if (window.createObjectURL != undefined) {                  url = window.createObjectURL(file);              } else if (window.URL != undefined) {                  url = window.URL.createObjectURL(file);              } else if (window.webkitURL != undefined) {                  url = window.webkitURL.createObjectURL(file);              }              return url;          }          _this.change(function () {              if ( this .value) {                  if (!RegExp( "\.(" + opts.ImgType. join ( "|" ) + ")$" , "i" ).test( this .value.toLowerCase())) {                      alert( "选择文件错误,图片类型必须是" + opts.ImgType. join ( "，" ) + "中的一种" );                      this .value = "" ;                      return false ;                  }                  if (navigator.userAgent.indexOf( "MSIE" ) > -1) {                      try {                          $( "#" + opts.Img).attr( 'src' , _self.getObjectURL( this .files[0]));                      } catch (e) {                          var src = "" ;                          var obj = $( "#" + opts.Img);                          var div = obj.parent( "div" )[0];                          _self. select ();                          if (top != self) {                              window.parent.document.body.focus();                          } else {                              _self.blur();                          }                          src = document.selection.createRange().text;                          document.selection.empty();                          obj.hide();                          obj.parent( "div" ).css({                              'filter' : 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)' ,                              'width' : opts.Width + 'px' ,                              'height' : opts.Height + 'px'                          });                          div.filters.item( "DXImageTransform.Microsoft.AlphaImageLoader" ).src = src;                      }                  } else {                      $( "#" + opts.Img).attr( 'src' , _self.getObjectURL( this .files[0]));                  }                  opts.Callback();              }          });      } });

3. [代码]demo.html     

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > <html xmlns= "http://www.w3.org/1999/xhtml" > <head>      <title>图片上传预览插件 v1.2</title>      <meta http-equiv= "X-UA-Compatible" content= "IE=7" />      <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" />      <meta name= "keywords" content= "Jquery图片上传预览插件" />      <link href= "http://jquery.decadework.com/css/decadework.css" rel= "stylesheet" type= "text/css" />      <script src= "http://jquery.decadework.com/js/jquery-1.9.1.min.js" type= "text/javascript" ></script>      <script src= "uploadPreview.min.js" type= "text/javascript" ></script>      <script>          $(function () {              $( "#up" ).uploadPreview({ Img: "ImgPr" , Width: 120, Height: 120 });          });      </script> </head> <body>      <div id= "header" >          <h1 class = "title" >              <strong>图片上传预览插件 v1.2</strong></h1>          <div id= "main" >              <div class = "card" id= "up_img" >                                   <div class = "summary" >                      <ul>                          <li><span style= "color: Green" >插件演示:</span>                              <div style= " width:120px; height:120px;" >                                  <img id= "ImgPr" width= "120" height= "120" style= "display: inherit;" /></div>                              <input type= "file" id= "up" />                          </li>                      </ul>                  </div>              </div>          </div>          <div id= "footer" >              <p class = "time" >                  jquery</p>              <p class = "copyright" >                  &copy; 2014 pan.decadework.com</p>          </div> </body> </html>