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>