여러 인스턴스의 valums 파일 업 로더

Question

내 사이트에서 작동하는 valum 파일 업 로더의 여러 인스턴스를 가져 오려고합니다. 그것은 하나의 인스턴스로 훌륭하게 작동하지만, 초기화 코드를 반복 할 때마다, 버튼이 하나도 보이지 않는 여러 버튼을 원합니다. 코드는 다음과 같습니다.

<cfoutput query="getTopics"> 

<script>   
    function createUploader(){    
     var uploader = new qq.FileUploader({ 
      element: document.getElementById('file-uploader#refTopicID#'), 
      action: 'components/ProjectBean.cfc', 
      params: {method: 'Upload', 
        topicID: #refTopicID#, 
        count: #Evaluate("session.#refTopicAbv#Count")#, 
        topicName: '#refTopicAbv#' 
        }, 
      encoding: 'multipart' 
     });   
    } 

    // in your app create uploader as soon as the DOM is ready 
    // don't wait for the window to load 
    window.onload = createUploader;  
</script> 

<div class="row" id="file-uploader#refTopicID#">   
</div> 

어떻게하면 여러 인스턴스를 얻을 수 있습니까? 미리 감사드립니다!

Answer 1

루프 내부에서 javascript 함수를 만듭니다. 즉, 여러 번 정의하고있는 것입니다.

대신 루프 외부에서 createUploader 함수를 이동해야합니다. 그리고 루프 내에서 각 주제에 대해 여러 번 호출하십시오. 이 같은

뭔가 :

<script>   
    function createUploader(elementID, topicID, topicCount, topicName){    
     var uploader = new qq.FileUploader({ 
      element: document.getElementById(elementID), 
      action: 'components/ProjectBean.cfc', 
      params: {method: 'Upload', 
        topicID: topicID, 
        count: topicCount, 
        topicName: topicName 
        }, 
      encoding: 'multipart' 
     });   
    } 
</script> 

<cfoutput query="getTopics"> 
<script>   
    createUploader('file-uploader#getTopics.refTopicID#', #getTopics.refTopicID#, #session[getTopics.refTopicAbv & "Count"]#, '#getTopics.refTopicAbv#'); 
</script> 

<div class="row" id="file-uploader#getTopics.refTopicID#"> </div> 
</cfoutput> 

NB : 나는 모든 쿼리 getTopics에서 온 값을 믿고있어, 그래서 제대로 범위를에 쿼리 이름을 접두어로했습니다. 이것은 대개 필수적인 것은 아니지만 성능상의 이유로 (다른 것들 중에서도) 좋은 습관입니다.