2016-08-04 12 views
1

layoutTemplates - > footerTemplateを編集して、画像ごとにコメントのテキストフィールドを追加しました。しかし、私がデータを提出すると、サーバーにコメント用のPOSTはありません。krajeeブートストラップファイルの入力 - uploadAsyncを使用してファイルごとに追加データを送信するにはどうすればいいですか:true

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>', 
       }, 

私はuploadExtraData使用するつもりだった。

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; 

をしかし、これは、アップロードされたすべて一つの画像のためのすべての画像にコメントを送信します。

コメントをデータベースに追加したいのですが、10個の画像をファイル入力にドラッグすると、データベースに100件の更新/要求があり、10件のコメントが10回表示されます。

感謝:)

答えて

0

あなたはuploadExtraData

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


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

       } 
... 
... 
にコールバック関数を使用することができます助けてください
関連する問題