需要將自定義元數據值設置爲來自IntialFileList的dom/html

Question

我正在使用InitalFileList來加載以前會話中的文件。我上傳的文件將有額外的s3元數據值，我需要顯示InitialFileList的一部分。在服務器端，我向jason對象添加了額外的元數據，我可以在控制檯輸出（響應）中看到它。

我的問題是...... 如何設置新的元數據/屬性（qq-edit-caption是我的模板中的輸入字段）到HTML顯示。我在下面的回調中沒有看到任何參數來處理dom。任何幫助深表感謝。

onSessionRequestComplete(response, success, xhrOrXdr) { 
// 
} 

我的HTML模板：

<script type="text/template" id="qq-template-manual-trigger-section1"> 
    <div class="qq-uploader-selector qq-uploader" qq-drop-area-text="Drop files here"> 
     <div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container"> 
      <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div> 
     </div> 
     <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone> 
      <span class="qq-upload-drop-area-text-selector"></span> 
     </div> 
     <div class="buttons"> 
      <div class="qq-upload-button-selector qq-upload-button"> 
       <div>Select files</div> 
      </div> 
      <button type="button" id="trigger-upload-section1" class="btn btn-primary"> 
       <i class="icon-upload icon-white"></i> Upload 
      </button> 
     </div> 
     <span class="qq-drop-processing-selector qq-drop-processing"> 
      <span>Processing dropped files...</span> 
      <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span> 
     </span> 
     <ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals"> 
      <li> 
       <div class="qq-progress-bar-container-selector"> 
        <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div> 
       </div> 
       <span class="qq-upload-spinner-selector qq-upload-spinner"></span> 
       <div> 
       <img class="qq-thumbnail-selector" qq-max-size="80" qq-server-scale>      
       <span class="qq-upload-file-selector qq-upload-file"></span> 
       <span class="qq-upload-size-selector qq-upload-size"></span> 
       <span class="qq-edit-filename-icon-selector qq-edit-filename-icon qq-editable" aria-label="Edit filename"></span> 
       <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text"> 
       </div> 
       <span class="qq-upload-caption-selector qq-upload-caption"></span> 
       <span class="qq-edit-caption-icon-selector qq-edit-caption-icon kk-editable" aria-label="Edit caption"></span>      
       <input class="qq-edit-caption-selector qq-edit-caption kk-editing" placeholder="Caption here ..." tabindex="0" type="text"> 
       <button type="button" class="qq-btn qq-upload-delete-selector qq-upload-update-caption" onclick="captionUpdate(true);">Update Caption</button> 

       <button type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Cancel</button> 
       <button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry</button> 
       <button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete" onclick="captionUpdate(false);">Delete</button 

       <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span> 
      </li> 
     </ul> 

     <dialog class="qq-alert-dialog-selector"> 
      <div class="qq-dialog-message-selector"></div> 
      <div class="qq-dialog-buttons"> 
       <button type="button" class="qq-cancel-button-selector">Close</button> 
      </div> 
     </dialog> 

     <dialog class="qq-confirm-dialog-selector"> 
      <div class="qq-dialog-message-selector"></div> 
      <div class="qq-dialog-buttons"> 
       <button type="button" class="qq-cancel-button-selector">No</button> 
       <button type="button" class="qq-ok-button-selector">Yes</button> 
      </div> 
     </dialog> 

     <dialog class="qq-prompt-dialog-selector"> 
      <div class="qq-dialog-message-selector"></div> 
      <input type="text"> 
      <div class="qq-dialog-buttons"> 
       <button type="button" class="qq-cancel-button-selector">Cancel</button> 
       <button type="button" class="qq-ok-button-selector">Ok</button> 
      </div> 
     </dialog> 
    </div> 
</script> 

Answer 1

如果您onSessionRequestComplete回調處理程序，您可以：

1. 遍歷條目。
2. 使用the getUploads API method將每個條目映射到Fine Uploader文件ID。
3. 使用the getItemByFileId API method獲取DOM中每個容器元素的句柄。
4. 選擇字幕輸入並用期望的值更新它。

例如：

onSessionRequestComplete: function(response, success) { 
    if (success) { 
     var uploader = this 
     response.forEach(function(item) { 
     var id = uploader.getUploads({uuid: item.uuid}).id 
     var fileEl = uploader.getItemByFileId(id) 
     fileEl.querySelector('.qq-edit-caption').value = item.caption 
     }) 
    } 
}