向图像添加字段（输入）(adding fields (inputs) to images)

向图像添加字段（输入）(adding fields (inputs) to images)

即时通讯使用dropzone上传多个图像，并且工作正常，直到我想为每个图像插入品牌和网址。

我唯一的问题就是当我要从输入字段中获取值时，我从服务器获取来自fieds（品牌，网址）的未定义值的myt请求但是如果我使用静态文本它似乎没有问题。

这是我的代码：

$('#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>" } );

im using dropzone to upload multiple images, and works fine, untill i want to insert a brand and url to each image.

The only issue im having is when im going to get the values from the input fields, im getting in myt request from the server undefined values from the fieds (brand, url) but if im using static text it appears no problem.

Here is my code:

$('#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>" } );

最满意答案

编辑：更新了所有这个答案：

您的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

EDIT: Updated all of this answer:

Your Ids are not unique, therefore you can't reliably get the input data from the ID selector.

Change your IDs on your inputs in the template to classes like this:

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>"

Then add the parameters with the sending event, this will get the input values at the time of upload.

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'); });

Refer to the Documentation here: http://www.dropzonejs.com/#event-sending