Question

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

Answer 1

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

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

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

Answer 2

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

这样的事情

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

调用

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

Valiums文件上传多个实例

2 个答案: