2

我正在编写一个 jQuery 插件，以允许以指定的形式初始化多个单个文件上传字段（使用Fine Uploader）。

最终，我希望表单知道它附加了这些单个上传器，因此我可以在手动开始文件上传和提交表单之前运行一些验证等。

我理想的初始化代码如下所示：

var form = $("form");
form.uploader();
form.addUploader({
  element: '.uploader_one'
});
form.addUploader({
  element: '.uploader_two'
});

到目前为止，我为实现这一点而编写的插件看起来像：

(function($) {

    var Uploader = function(form){
       addUploader = function() {
          // Initialize Fine Uploader
       }

       $(form).submit(function(e) {
         // Run validations, then process uploaders
         $(this).submit();
       } 
    }

    $.fn.uploader = function(options) {
       var uploader = new Uploader(this);
    };

})(jQuery);

大部分都有效，除了 addUploader 函数不可公开访问。

我可能会以错误的方式解决这个问题吗？任何帮助将非常感激！

4

2 回答 2

1

您需要创建addUploader对象的成员以使其可通过对象访问（而不是作为与对象断开连接的全局变量）：

 this.addUploader = function() {

插件必须对对象做一些事情以便它变得可访问，例如返回它：

$.fn.uploader = function(options) {
  return new Uploader(this);
};

现在您可以从插件中获取对象并使用它：

var form = $("form");
var upl = form.uploader();
upl.addUploader({
  element: '.uploader_one'
});
upl.addUploader({
  element: '.uploader_two'
});
于 2013-04-23T21:45:56.880 回答
1

您应该遵循开发插件的一般做法。您的插件的建议结构类似于：

(function($) {
    var methods = {
        init: function (options) {
            var data = $(this).data("uploader-plugin");
            if (!data) {
                $(this).on("submit", function (e) {

                });
                $(this).data("uploader-plugin", new Uploader(options));
            }
        },
        add: function (options) {
            // Use `options.element`
            $(this).data("uploader-plugin").elements.push(options.element);
            console.log($(this).data("uploader-plugin"));
        }
    };

    var Uploader = function (opts) {
        this.whatever = opts.a;
        this.elements = [];
    };

    $.fn.uploader = function(method) {
        var args = arguments;
        return this.each(function () {
            if (methods[method]) {
                return methods[method].apply(this, Array.prototype.slice.call(args, 1));
            } else if (typeof method === "object" || !method) {
                return methods.init.apply(this, args);
            } else {
                $.error("Method " +  method + " does not exist on jQuery.uploader");
            }
        });
    };
})(jQuery);

演示：http: //jsfiddle.net/WyGqc/

你会这样称呼它：

var form = $("form");
form.uploader({
    a: "whatever";
});
form.uploader("add", {
    element: ".uploader_one"
});

它实际上将其应用于原始选择器中的所有选定元素，并继续链接。它还遵循插件使用的常规约定 - 意思是，您uploader使用不同的参数调用插件名称 ( ) 来执行不同的操作。

于 2013-04-23T22:03:04.530 回答