javascript - 具有多个实例的Valums Fileuploader

我在valums fileuploader上使用了多个实例，但似乎上载器仅对每个实例使用最后的设置，是否可以避免这种情况并使用本地设置？在正确的实例上上传可以正常进行，但是initializeUploader内部的元素始终相同，无论我使用哪个实例。

jQuery(function() {
    $("[rel='uploadable']").each(function(){
        initializeUploader($(this).attr("id"))
    })
});
function initializeUploader(anchor) {
    element = document.getElementById(anchor)
    uploader = new qq.FileUploader({
        element: element,
        action: element.getAttribute("data-upload-path"),
        allowedExtensions: ["png", "gif", "jpg", "jpeg"],
        params: {
            authenticity_token: $("meta[name=csrf-token]").attr("content")
        },
        onSubmit: function(id, fileName){
            console.log ($(element))
            $(element).append("<span class='image'><div id='progress-" + id + "'></div></span>")
        },
        onProgress: function(id, fileName, loaded, total){
            var progress = (loaded / total) * 100;
            $("#progress-" + id).progressbar({value: progress})
        },
        onComplete: function(id, fileName, responseJSON){
            image_url = ""
            $.each(responseJSON, function(key, item) {
                if (key == "url")
                    image_url = item
            });

            $("#progress-" + id).remove();
            console.log($(element).parent())
            console.log($(element).closest(".quanta"))
            console.log(image_url)
            $(element).closest(".quanta").css({'width': '300px', 'height': '300px', 'background-color': '', 'background-image': 'url(' + image_url + ')', 'background-size': '100% 100%'})
        },
        debug: true
    });
};

最佳答案

我面临着同样的问题。为了解决我的问题，我使用了这个技巧。

       $('a[href="#tabpdf"]').livequery('click', function () {
          initializeUploader($('#pdfuploader')[0]);
      });
      $('a[href="#tabphotos"]').livequery('click', function () {
          initializeUploader($('#photouploader')[0]);
      });

我使用条件语句来加载该函数，并将特定参数传递给该函数。
希望能帮助到你。