zoukankan      html  css  js  c++  java
  • 上传图片预览插件(转)

    /*
    *名称:图片上传本地预览插件 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 = "";
                        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()
                }
            })
        }
    });

     HTML代码:

     <div style=" 500px; margin: 0px auto;">
            <h2>图片上传预览演示</h2>
            <div>
                <img id="ImgPr" width="220" height="220" /></div>
            <input type="file" id="up" />
        </div>
  • 相关阅读:
    构造函数以及四种方法的调用
    函数声明与函数表达式的区别
    display:inline-block,block,inline的区别与用法
    SASS 使用(vs code)
    SASS 使用(安装)
    vue 学习笔记1 入门
    ES6学习5 字符串的扩展
    ES6学习4 变量的解构赋值
    es6 学习2 模板字符
    es6 学习1 let表示变量 、const表示常量 与 var 变量的区别
  • 原文地址:https://www.cnblogs.com/sumg/p/5140029.html
Copyright © 2011-2022 走看看