图片预览插件小封装

根据最近项目需求写的一个图片预览小插件,需引入jq,(其实可以不用引入,但需要做修改)

html部分

            <div id="showBox"></div>
            <a href="javascript:;" id="btn">点击上传图片</a>
            <input id="btnHidden" type="file" style="display:none">

js部分

        function MyUploadImg(options) {
            var options = options || {}
            options.ImgType = ["gif", "jpeg", "jpg", "bmp", "png"];
            options.ErrMsg = "选择文件错误,图片类型必须是(gif,jpeg,jpg,bmp,png)中的一种";
            options.isPrevImg = false;
            this._init(options);
        }
        MyUploadImg.prototype = {
            constructor: MyUploadImg,
            _init: function (options) {
                var self = $(this)[0];
                self.options = options;
                var o = $('#' + self.options.id);
                self.showImg = $('<img/>')
                self.showImg.attr('id', 'img_' + self.options.id);
                self.showImg.attr('src', self.options.baseUrl)
                var imgW = options.width;
                var imgH = options.height;
                self.showImg.css({
                    'width': imgW,
                    'height': imgH
                });
                o.append(self.showImg)
                self.bindClick();
                self.bindChange();
            },
            bindClick: function () {
                var self = $(this)[0];
                var $btn = $('#' + self.options.btnId)
                $btn.on('click', function (e) {
                    e.preventDefault();
                    $('#' + self.options.hiddenBtnId).click();
                })
            },
            bindChange: function () {
                var self = $(this)[0];
                $('#' + self.options.hiddenBtnId).on('change', function () {
                    self.change($(this)[0].files[0])
                })
            },
            change: function (file) {
                var self = $(this)[0];
                if (file) {
                    if (!RegExp("\.(" + self.options.ImgType.join("|") + ")$", "i").test(file.type.toLowerCase())) {
                        alert(self.options.ErrMsg);
                        self.clear()
                        return false;
                    }
                    var url = $(this)[0].getObjectURL(file)
                    self.showImg.attr('src', url)
                    self.options.isPrevImg = true;
                }
            },
            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;
            },
            clear:function(){
                console.log(1)
                var self = $(this)[0];
                $('#' + self.options.hiddenBtnId).val("");
                self.showImg.attr('src', self.options.baseUrl);
            }
        }

使用方法

            new MyUploadImg({
                id: "showBox",
                btnId: "btn",
                hiddenBtnId: "btnHidden",
                width: "200",
                height: "200",
                baseUrl: baseUrl
            });