krajee Bootstrap 文件输入 - 如何使用 uploadAsync 发送每个文件的附加数据：true

Question

我已经编辑了 layoutTemplates -> footerTemplate 以包含一个文本字段，用于每张图片的评论。但是我提交数据的时候，服务器端的评论没有POST

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 张 updates/requests、10 条评论、10 次。

请帮忙 :) 谢谢

Answer 1

您可以在 uploadExtraData 中使用回调函数

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


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

                }
 ...
 ...

krajee Bootstrap 文件输入 - 如何使用 uploadAsync 发送每个文件的附加数据：true

krajee Bootstrap File Input - how can I send additional data per file using uploadAsync: true

asynchronous

file-upload

input

jquery-file-upload