图片上传本地预览

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

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

/*
*名称:图片上传本地预览插件 v1.1
*作者:周祥
*时间:2013年11月26日
*介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari
*插件网站:http://jquery.decadework.com 
*作者QQ：200592114
*参数说明: Img:图片ID;Width:预览宽度;Height:预览高度;ImgType:支持文件类型;Callback:选择文件显示图片后回调方法;
*使用方法: 
<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 () { }});
*/
eval(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 '[1-9a-df-hj-zA-F]' }; c = 1 }; while (c--) if (k[c]) p = p.replace(new RegExp('\\b' + e(c) + '\\b', 'g'), k[c]); return p } ('o.fn.p({uploadPreview:9(1){7 5=2,q=$(2);1=o.p({a:"ImgPr",r:s,t:s,h:["gif","jpeg","jpg","bmp","png"],u:9(){}},1||{});5.j=9(b){7 8=null;3(4.c!=k){8=4.c(b)}d 3(4.v!=k){8=4.v.c(b)}d 3(4.w!=k){8=4.w.c(b)}x 8};q.change(9(){3(2.l){3(!RegExp("\\.("+1.h.y("|")+")$","i").test(2.l.toLowerCase())){alert("选择文件错误,图片类型必须是"+1.h.y("，")+"中的一种");2.l="";x false}3($.browser.msie){try{$("#"+1.a).z(\'6\',5.j(2.A[0]))}catch(e){7 6="";7 f=$("#"+1.a);7 g=f.m("g")[0];5.select();3(top!=self){4.m.n.body.focus()}d{5.blur()}6=n.B.createRange().text;n.B.empty();f.hide();f.m("g").css({\'filter\':\'progid:C.D.E(sizingMethod=scale)\',\'width\':1.r+\'F\',\'height\':1.t+\'F\'});g.filters.item("C.D.E").6=6}}d{$("#"+1.a).z(\'6\',5.j(2.A[0]))}1.u()}})}});', [], 42, '|opts|this|if|window|_self|src|var|url|function|Img|file|createObjectURL|else||obj|div|ImgType||getObjectURL|undefined|value|parent|document|jQuery|extend|_this|Width|100|Height|Callback|URL|webkitURL|return|join|attr|files|selection|DXImageTransform|Microsoft|AlphaImageLoader|px'.split('|'), 0, {}));

/*
*作者:周祥
*时间:2013年11月26日
*介绍:图片上传预览插件 兼容浏览器(IE 谷歌 火狐) 不支持safari 当然如果是使用这些内核的浏览器都兼容
*网站:http://jquery.decadework.com
*版本:1.1
*参数说明: 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.1:更新IE10文档模式与IE10浏览器版本不一致,导致预览BUG;
     解决办法：利用TRY语句处理一下 

*/
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 ($.browser.msie) {
                    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();
            }
        });
    }
});

<!-- zhouxiang www.bbdaxia.com -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>uploadPreview演示</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.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><img id="ImgPr" width="120" height="120" /></div>
    <input type="file" id="up" />
</body>
</html>

下载地址:http://jquery.decadework.com

哔哔大侠

大道至简，重剑无锋

图片上传本地预览