向图像添加字段（输入）

Question

我使用 dropzone 上传多张图片，并且工作正常，直到我想插入品牌和 url 到每张图片。

我遇到的唯一问题是当我要从输入字段中获取值时，我从服务器收到来自字段（品牌，url）的未定义值的我的请求，但如果我使用静态文字好像没问题。

这是我的代码：

 $('#add').on('click',function(e){
        e.preventDefault();
        myDropzone.processQueue();
    });

   Dropzone.autoDiscover = false;
    // Dropzone class:
    var myDropzone = new Dropzone("div#myId", {
        url: "/galleries",
        autoProcessQueue:false,
        headers: {
            'X-CSRF-TOKEN': 'vjghjghjhgjghjghjghjgLxX',

        },
        params: {
            'brand': $('#brand').val(),
            'url' : $('#url').val(),
            'description': 'small detail'
        },
        previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n  " +
        "<div class=\"dz-image\"><img data-dz-thumbnail /></div>\n " +
        "<input type=\"text\" id=\"brand\" name=\"dz-brand\">\n " +
                "<input type=\"text\" id=\"url\" name=\"dz-url\">\n 
..../div>"
             }



   );

Answer 1

编辑：更新了所有答案：

您的 ID 不是唯一的，因此您无法从 ID 选择器可靠地获取输入数据。

将模板中输入的 ID 更改为类，如下所示：

previewTemplate: "<div class='dz-preview dz-file-preview'>\n  " +
    "<div class='dz-image'><img data-dz-thumbnail /></div>\n " +
    "<input type='text' class='dz-brand' value='This is the text'> \n " +
    "<input type='text' class='dz-url'>\n </div>"

然后在发送事件中加上参数，这样就得到了上传时的输入值。

myDropzone.on("sending", function(file, xhr, formData) {
    formData.append('brand'      , $(file.previewElement).find('.dz-brand').val());
    formData.append('url'        , $(file.previewElement).find('.dz-url').val());
    formData.append('description', 'small detail');
});

请参阅此处的文档：http://www.dropzonejs.com/#event-sending

向图像添加字段（输入）

adding fields (inputs) to images

javascript

jquery

dropzone.js

编辑：更新了所有答案：