• 本地图片预览


    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>图片上传预览演示-柯乐义</title>
    <script src="JS/jQuery.js" type="text/javascript"></script>
    
    </head>
    <body>
        <div style="500px;margin:0px auto;">
            <h2>图片上传预览演示</h2>
            <div><img id="ImgPr" width="240" height="240" /></div>
            <input type="file" id="up" />
        </div>
    </body>
    </html>
    <script type="text/javascript">
        /*
    *名称:图片上传本地预览插件 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 () { }});
    */
    $(function () {
        $("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120, ImgType: ["gif", "jpeg", "jpg", "bmp", "png"] });
    });
    jQuery.fn.extend({
        uploadPreview: function (opts) {
            /*
                原生this  this和$(this)所指的DOM对象是一致的   
                原生this没办法$(this)的JQuery的方法
             */
            var _self = this,   
                _this = $(this);
            /*
                 jQuery.extend: 属性迭代
             */
            opts = jQuery.extend({
                Img: "ImgPr",
                Width: 360,
                Height: 360,
                ImgType: ["Gif", "Jpeg", "jpg", "bmp", "png"],
                Callback: function () {
                    alert(1);
                }
            }, opts || {});
            /*
                前端做做图片上传功能时,经常想上传完后可以直接预览,
                这时候通常有两种方式,一种就是转成base64编码,然后展示出来。
                当然还有另外一种方式,那就是用getObjectURL实现(兼容IE10及以上)
             */
            _self.getObjectURL = function (file) {
                var url = null;
                /*
                    通过window.URL.createObjectURL()方法生成的资源URL
                    bdFile="Blob:http...3a%/asdasd89090786" 这种。
                    把blob转换File格式显示出来
                    blob:null/65018f4e-938a-4821-84f3-a9e6aadcaabf
                    浏览器兼容性适配
                 */ 
                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);
                }
                console.log(url);
                     
                return url;
            };
            _this.change(function () {
                if (this.value) {
                    console.log(this.value);//this.value是所传入的格式  C:fakepathiTunes.exe
                         
                    /**
                     * 因为_this 可以调用JQuery里面方法,当调用change方法是,change方法解析之后返回的是DOM对象
                     * 所以this指的是原生DOM 对象
                     */
                    console.log(_this);//返回的是数组对象 [input#up, selector: "#up", context: document]
                    console.log(this);//返回的是DOM  <input type="file" id="up">
                         
                    /** 正则表达式  判断图片的格式
                     *  表达式的意思是  将this.value是所传入的格式先装换成小写,在进行正则表达式验证
                     *  验证方式 - 正则表达式:传入图片的后缀名是否和opts.ImgType传入的参数一直
                     *  !取反     .$ 表示后缀是.xxx   i 执行对大小写不敏感的匹配。
                     */
                         
                    if (!RegExp(".(" + opts.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
                        console.log( opts.ImgType.join("|"));
                        alert("选择文件错误,图片类型必须是" + opts.ImgType.join(",") + "中的一种");
                        this.value = "";
                        return false;
                    }
                    /*
                       $.browser.msie 在jQuery 1.3中不建议使用。浏览器内核标识                
                     */
                    if ($.browser.msie) {
                        /**
                         *  在下面的例子中,我们故意在 try 块的代码中写了一个错字。
                            该实例本应该提醒"欢迎光临!",但弹出的是拼写错误信息。
                            catch 块会捕捉到 try 块中的错误,并执行代码来处理它:
    
                            兼容性配置
                         */
                        try {
                            $("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]));
                        } catch (e) {
                            console.log(_self);
                                 
                            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'
                            });
                            /**
                             * Microsoft  AlphaImageLoader是IE滤镜的一种,其主要作用就是对图片进行透明处理。
                             * 虽然FireFox和IE7以上的IE浏览器已经支持透明的PNG图片,
                             * 但是就IE5-IE6而言还是有一定的意义。
                             * 
                             */
                            div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src;
                        }
                    } else {
                        $("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]));
                    }
                    opts.Callback();
                }
            })
        }
    });
    </script>
  • 相关阅读:
    Python进阶: Decorator 装饰器你太美
    计算机网络自顶向下方法第3章-传输层 (Transport Layer).2
    Python进阶:值传递,引用传递?不存在的,是赋值传递
    Python进阶:对象复制与比较,分深浅,见真假
    Python基础:模块化来搭项目
    这说明一个问题
    我稍微思考了一下
    由LruCache和DiskLruCache提供三级缓存支持的ImageLoader
    回忆一个加塞方法
    三年六班的李子明同学,你妈拿了两本计算机基础在二号树上等你
  • 原文地址:https://www.cnblogs.com/patriot/p/7055186.html
Copyright © 2020-2023  润新知