Valums fileuploader с несколькими экземплярами

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», чтобы локальная переменная была захвачена и использована.