1つのテンプレートで手動アップロードボタンを使用して複数のfineuploaderインスタンスを使用する方法

Question

fine-uploaderプラグインでは、セクションごとにオプションのキャプションフィールドと手動アップロードボタンを使用して複数のインスタンスを追加しようとしています。

私がアップロードしているフォームは、レイアウトとコンテンツで動的に生成されます。アップロードされたファイルは、フォームのセクションとファインアップローダーのインスタンスに基づいてハンドラによって保存されなければなりません。私はまた、個別にアップローダの個々のインスタンスを効果的にアップロードする機能が必要です

私が抱いている問題は、手動アップロードオプションのガイドライン&のデモに従っています。つまり、クリック機能を追加すると、常に最初のインスタンス.getElementByIdを使用してボタンを検索します。

私はこれを回避するために、各インスタンスに新しいテンプレートを定義しますが、1つのテンプレートを使用することをお勧めします。

（各インスタンスのための - 簡単にするために省略）テンプレートコードは、理想的な世界で

<script type="text/template" id="qq-template-manual-trigger#XX#"> 
<div class="qq-uploader-selector qq-uploader" qq-drop-area-text="Drop files here"> 
... 
    <div class="buttons"> 
     <div class="qq-upload-button-selector qq-upload-button"> 
      <div>Select files</div> 
     </div> 
     <button type="button" id="trigger-upload#XX#" class="btn btn-primary"> 
      <i class="icon-upload icon-white"></i> Upload 
     </button> 
    </div> 
... 
    <ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals"> 
     <li> 
... 
      <input class="caption" tabindex="1" type="text"> 
... 
     </li> 
    </ul> 
... 
</div> 
</script> 
<div id="fine-uploader-manual-trigger#XX#"></div> 

とアップローダースクリプト

<script> 
var manualUploader#XX# = new qq.FineUploader({ 
     element: document.getElementById('fine-uploader-manual-trigger#XX#'), 
     template: 'qq-template-manual-trigger#XX#', 
     request: { 
      inputName: "imagegroup[]", 
      endpoint: '/SaveFile.aspx' 
     }, 

     autoUpload: false, 
     debug: true, 
     callbacks: { 
    onError: function(id, name, errorReason, xhrOrXdr) { 
     alert(qq.format("Error on file number {} - {}. Reason: {}", id, name, errorReason)); 
    }, 
    onUpload: function (id) { 
       var fileContainer = this.getItemByFileId(id) 
       var captionInput = fileContainer.querySelector('.caption') 
       var captionText = captionInput.value 

       this.setParams({ 
        "descr[]": captionText, 
        <-- Other parameters here --> 
       }, id) 
      } 
     }, 
    }); 


    qq(document.getElementById("trigger-upload#XX#")).attach("click", function() { 
     manualUploader#XX#.uploadStoredFiles(); 
    }); 

</script> 

である私は単に単一

<script type="text/template" id="qq-template-manual-trigger"> 
.... 
</script> 

を持っている希望します

次に、必要な場合は、複数回、フォーム

<div id="fine-uploader-manual-trigger"></div> 
<script> 
var manualUploader#XX# = new qq.FineUploader({ 
     element: document.getElementById('fine-uploader-manual-trigger'), 
     template: 'qq-template-manual-trigger', 
... 
} 
    qq(document.getElementById("trigger-upload")).attach("click", function() { 
     manualUploader#XX#.uploadStoredFiles(); 
    }); 
</script> 

.getElementByIdを呼び出すことによってattach関数の使用は、単に間違っている感じている、または非常に少なくともcludgyで、インスタンスごとにアップロードを活性化する良い方法はありますか？

事前に感謝 K

Answer 1

ソート、代わりにdocument.getElementById("trigger-upload")

のデモを使用しての

...誰もがより良い答えを持っている場合は、単に document.querySelector("#fine-uploader-manual-trigger #trigger-upload")

例えば

を使用

<div id="fine-uploader-manual-triggerXX"></div> 

<script> 
    var manualUploaderXX = new qq.FineUploader({ 
    element: document.getElementById('fine-uploader-manual-triggerXX'), 
    template: 'qq-template-manual-trigger', 
    ... // omitted for brevity 
    } 

    qq(document.querySelector("#fine-uploader-manual-triggerXX #trigger-upload")).attach("click", function() { 
     manualUploaderXX.uploadStoredFiles(); 
    }); 
</script>