2012-02-15 68 views
2

Im使用valums fileuploader多個實例,但似乎上傳只使用每個實例的最後設置,有沒有一個選項來避免這種情況,並使用本地設置?正確的實例上傳效果不錯,但initializeUploader中的元素總是相同的,無論我使用哪個實例。Valums fileuploader與多個實例

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 
    }); 
}; 

回答

2

我面臨同樣的問題。爲了解決我的問題,我使用了這個技巧。

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

我使用條件語句來加載函數,並且我將特定的參數傳遞給函數。 希望它有幫助。

2

initializeUploader中,您的elementuploader變量是全局變量。所以像

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

被調用時,它會調用上設置element的最後一個值。使用「var」以便捕獲和使用局部變量。