• JQuery插件:图片上传本地预览插件,改进案例一则。


    /*
    *名称:图片上传本地预览插件 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岁】最近学会很爱用的骂人词)浏览器,这代码依然健壮如泰山。

  • 相关阅读:
    关于时间:UTC/GMT/xST/ xDT
    javax.validation.UnexpectedTypeException: HV000030: No validator could be found for constraint 'javax.validation.constraints.Size' validating type 'java.util.Date'.
    svn tree confflect
    spring+mybatis 配置双数据源
    JUC 之 ThreadPoolExecutor 的一些研究
    关于 Thread.currentThread()
    swagger 基础入门
    oryx 分离&集成
    Jenkins 之邮件配置
    Jenkins 简单配置
  • 原文地址:https://www.cnblogs.com/rgqancy/p/5526543.html
Copyright © 2020-2023  润新知