值文件上傳器的多個實例

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>

注意：我假設所有值都來自您的查詢getTopics ，所以我在查詢名稱前加上了前綴以適當地限制它們的范圍。 這通常不是必需的，但出於性能方面的考慮（除其他事項外），這是一種很好的做法。