jquery插件如何解决同一个页面多处调用互不影响？

Question

代码结构大概是这样的：

;
(function ($) {

    //默认参数
    var defaults = {
        url: '/',//服务器地址
        auto: true,//是否立即上传
        uploadSelector: '#send',
        accept: 'image/*', //上传文件类型
        drag: true,//拖拽上传
        fileName:'file',
    };

    function Upload(element, options) {
        this.element = element;
        this.settings = $.extend({}, defaults, options);
        this.init();
    }

    

    //初始化
    Upload.prototype.init = function () {
        var self = this;
        //加载dom元素
        self.element.append(method.fileInput('pic', self.settings.accept));
        //上传
        if (self.settings.auto) {
            //立即上传
            $(document).on('change.upload', self.element.children('input[type="file"]'), function (e) {
                self.send();
            })
        } else {
            //上传之前
            $(document).on('change.upload', self.element.children('input[type="file"]'), function () {
                self.element.trigger('beforeSend');
            });

            //点击其他按钮再上传
            $(self.settings.uploadSelector).on('click.upload', function (e) {
                self.send();
            })

        }
    };

Upload.prototype.send = function () {
        var self = this;
        self.ajax(self.settings.fileName,self.settings.url, function (e) {
            //上传成功
            self.element.children('img').remove();
            self.element.trigger('success', e);
            //上传完成为图片添加一些事件
            //self.element.append(method.cencelImg());

        }, function (e) {
            //上传失败
            self.element.trigger('error', e);
        }, function (e) {
            //服务器出错
            self.element.trigger('serverError', e);
        }, function (e) {
            //上传完成
            self.element.trigger('complete', e);

        });
    };

    //模拟表单发送文件
    Upload.prototype.ajax = function (fileName,url, successfn, errorfn, servererror, complete) {

        // 初始化一个 XMLHttpRequest 对象
        var xhr = new XMLHttpRequest();
        // 初始化一个 FormData 对象
        var form = new FormData();

        // 获取文件
        var pic = this.element.children('input').get(1).files[0];
        // 携带文件
        form.append(fileName, pic);

        //开始上传
        xhr.open("POST", url, true);
        //在readystatechange事件上绑定一个事件处理函数
        xhr.onreadystatechange = callback;
        xhr.send(form);

        function callback() {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    var json = eval("(" + xhr.responseText + ")")
                    successfn(json);
                }
                else if (xhr.status == 500) {
                    servererror("服务器出错了,请检查后端代码!")
                }
                else {
                    errorfn();
                }
                complete()
            }
        }
    };

    
    ......


    $.fn.uploads = function (options) {
        return new Upload(this, options);
    }

})(jQuery);

但是如果一个页面有需要两个上传的话，调用两次就出现相互影响，其中一个上传，别一个也会触发上传。

        $('#articlePic').uploads();

        $('#homePic').uploads();
        //上面点击上传，下面这个也会同时触发上传

Answer 1

其实根据你以面对对象的写法，new 出来的两个对象调用各自的方法是不会有影响的。但是你们触发上传的事件绑到了document这个公用的对象上面，所以不管哪个对象抛出change.upload这个上传事件，另一个对象也会接收到这个事件，所以也会调用上传的方法啊。你只要把document替换成跟实例相关的节点应该就可以了

Answer 2

options 里有一个 uploadSelector，和你传入的 element 好像没有什么关系啊。但是触发上传应该都是这个 uploadSelector 在触发，会不会是这里的问题。

Answer 3

配置那里不是有选择器吗？不是在那里配置吗？