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

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

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

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

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

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

标签： <无>

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

1. [代码]uploadPreview.min.js

/*

*作者:周祥

*时间: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

/*

*作者:周祥

*时间: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

<!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 id="footer">

<p class="time">

jquery</p>

<p class="copyright">

</div>

</body>

</html>