JQuery插件：图片上传本地预览插件，改进案例一则。

时间：2024-05-02 18:33:44
/*

*名称:图片上传本地预览插件 v1.1

*作者:周祥

*时间:2013年11月26日

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

*插件网站:http://keleyi.com/keleyi/phtml/image/16.htm

*参数说明: 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 () { }});

*/

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 = "";

                    if('headIconImgShow' != opts.Img) {//wuwei添加2016-03-30

                        $("#" + opts.Img).attr('src', "");//liuhu添加20160120

                    }

                    return false;

                }

                //Jquery 1.3 : 1.3以后就不建议使用了:$.browser.msie && $.browser.version，你目前使用的组件里可能还有应用。

                //JQuery 1.7 : 1.7

                //JQuery 1.9 : 1.9之后，支持$.support.msie

                //具体浏览器版本判断方案：

                //http://zhidao.baidu.com/link?url=LftOa4QYHnDBuOj1HHEnUbmuIgbvd9Ka_yCKWbofx-wDw12l90lIZWn4zyQniwNOE_5vqPj-q9cqRZRFoQnL8q

                //http://www.jb51.net/article/50463.htm

                //http://my.oschina.net/ffwcn/blog/213708

                //上边说了一大堆，浏览器版本判断来判断去，这里的代码，无非是想确定files是否被浏览器支持，就不如快刀斩乱麻，不抛异常就是支持，否则就是不支持。

                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;

                }

                opts.Callback();

            }

        })

    }

});

原作者写这个插件时，可能随手，就用了JQuery1.9的新方法$.support.msie，而我的现实情况是，项目已经用了JQuery1.7，我可不敢贸然升级到1.9（搞不好，吃不了兜着走）。

我个人推断作者的思路是，是想通过判断浏览器的类型和版本来确定是否支持input的files特性（作者说了不支持safari，当然连苹果都不发布window版的safari，还支持个毛线）。

如果是IE，是IE10及其以上版本，也支持files；是IE9及以下版本，则不支持files，调用files自然会抛出异常，通过捕获异常，采用workaroud方案绕过去。非IE，认为都是webkit，都理所当然是标准的支持files。

作者要求JQuery1.9,我们只用JQuery1.7，那就只好改写$.support.msie，网上判断IE版本的最佳方案，就是正则表达式。可问题是现在IE11之后的Edge，没准agent里已经不包含msie这个字符了，至少我用正则没进去。

干脆思路跳出来，快刀斩乱麻，参照原作者那部分的思路，管你啥版本，无非要判断浏览器是否支持files，试一下不就知道了，不抛异常就支持，否则捕获异常就按IE9下的workaround方案执行。

这样以后，管你微软出个狗屁（呵呵，我们家小点点【2岁】最近学会很爱用的骂人词）浏览器，这代码依然健壮如泰山。

相关文章