具有多个实例的 Valums 文件上传答案

【问题标题】：Valums fileuploader with multiple instances具有多个实例的 Valums 文件上传
【发布时间】：2012-02-15 21:07:33
【问题描述】：

我正在使用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
    });
};

【问题讨论】：

标签： javascript jquery ajax file-upload ajax-upload

【解决方案1】：

我也遇到了同样的问题。为了解决我的问题，我使用了这个技巧。

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

我使用条件语句来加载函数，并将特定参数传递给函数。希望对您有所帮助。

【讨论】：

【解决方案2】：

在initializeUploader 中，您的element 和uploader 变量是全局变量。所以当事情像

    ...
    onSubmit: function(id, fileName){
        console.log ($(element))
        $(element).append("<span class='image'><div id='progress-" + id + "'></div></span>")
    },
    ...

被调用，它将在最后一个设置为element 的值上调用。使用“var”，以便捕获和使用局部变量。

【讨论】：