krajee Bootstrap Dateieingabe - wie kann ich zusätzliche Daten per Datei senden mit uploadAsync: true

Question

Ich habe die LayoutTemplates -> footerTemplate bearbeitet, um ein Textfeld für einen Kommentar pro Bild aufzunehmen. Aber wenn ich die Daten einreiche, gibt es keinen POST für den Kommentar auf dem Server.

var footerTemplate = '<div class="file-thumbnail-footer">\n' + 
     ' <div style="margin:5px 0">\n' + 
     '  <input class="form-control input-sm text-center {TAG_CSS_NEW}" value="{comments}" name="comment[]" type="text" placeholder="Enter Details...">\n' + 
     ' </div>\n' + 
     ' <div style="margin:15px 0 5px 0px"><samp><small class="file_name">{caption}</small></samp></div>\n' + 
     ' {size}\n' + 
     ' {progress} {actions}\n' + 
     '</div>'; 


layoutTemplates: { 
        footer: footerTemplate, size: '<samp><small>({sizeText})</small></samp>', 
        actionUpload: '<button type="button" class="kv-file-upload {uploadClass}" style="display:none;" title="{uploadTitle}">{uploadIcon}</button>\n', 
        actionZoom: '<button type="button" class="kv-file-zoom {zoomClass}" style="display:none;" title="{zoomTitle}">{zoomIcon}</button>', 
       }, 

Ich wollte uploadExtraData verwenden:

var out = {}; 

      var i = 0; 
      out['commentsToUpdate'] = []; 

      $('.file-initial-thumbs .kv-input:visible').each(function() { 
       $el = $(this);       
       out["commentsToUpdate"][i] = $el.val(); 
       i++; 
      }); 

      var i = 0; 
      out['commentsToAdd'] = []; 

      $('.file-live-thumbs .kv-input:visible').each(function() { 
       $el = $(this);       
       out["commentsToAdd"][i] = $el.val()+"::+::"; 
       i++; 
      }); 

      return $out; 

Aber diese sendet die Kommentare in allen Bildern für jedes Bild, das hochgeladen wird.

Ich möchte meine Datenbank mit den Kommentaren zu aktualisieren, aber wenn ich 10 Bilder in den Dateieingang ziehen würde meine Datenbank 100 Updates/Anfragen, 10 gepostete Kommentare, 10 mal.

Bitte helfen :) Dank

Answer 1

Sie eine Callback-Funktion in der uploadExtraData verwenden können

... 
    ...    
       ], 
       uploadExtraData: function(previewId, index) { 


        return { 
           key: index, 
           previewId: previewId, 
           comment: $("#comment").val(), 
           userid: <?=$userId;?>, 
           jobid: <?=$jobId;?> 
          }; 

       } 
... 
...