jquery/Dropzone.js 获取添加图片的当前索引答案

【问题标题】：Jquery/Dropzone.js Get the current index of an added imagejquery/Dropzone.js 获取添加图片的当前索引
【发布时间】：2014-08-07 08:04:38
【问题描述】：

我正在构建一个自定义 Dropzone.js：http://www.dropzonejs.com/ 布局。上传运行良好。我想以 Dropzone 用于特定帖子的形式保存其他数据。

我需要对数组进行索引，以便发布的所有数据在数组中都是相关的。

“previewTemplate”只允许字符串 - 没有功能。

例如：lead_image[ 此处索引][文件名]

uploader.dropzone({
        url: "/admin/upload",
        acceptedFiles: 'image/*',
        thumbnailWidth: 80,
        thumbnailHeight: 80,
        parallelUploads: 20,
        autoProcessQueue: true, // Make sure the files aren't queued until manually added
        clickable: ".fileinput-button", // Define the element that should be used as click trigger to select files.
        previewsContainer: "#previews", // Define the container to display the previews
        init: function() {
            this.on("addedfile", function(file) {
                var index = $('li.image').length;
            });
        },
        previewTemplate:     '<li class="image row dd-item">' +
                                '<div class="col-sm-1 dd-handle">' +
                                    '<span class="preview">' +
                                        '<img data-dz-thumbnail />' +
                                    '</span>' +
                                '</div>' +
                                '<div class="col-sm-8">' +
                                    '<p><span class="name" data-dz-name></span> | <span class="size" data-dz-size></span></p>' +
                                    '<input type="hidden" class="form-control" name="lead_image[ INDEX HERE ][filename]" data-dz-name/>' +
                                    '<input type="text" class="form-control" name="lead_image[ INDEX HERE ][title]" value="" placeholder="Title" />' +
                                    '<input type="text" class="form-control" name="lead_image[ INDEX HERE ][alt]" value="" placeholder="Alt Tag" />' +
                                    '<input type="text" class="form-control" name="lead_image[ INDEX HERE ][caption]" value="" placeholder="Caption" />' +
                                    '<input type="text" class="form-control" name="lead_image[ INDEX HERE ][sort]" value="" placeholder="Sort Order" />' +
                                    '<strong class="error text-danger" data-dz-errormessage></strong>' +
                                '</div>' +
                                '<div class="col-sm-2">' +
                                    '<button data-dz-remove class="btn btn-danger delete"><i class="glyphicon glyphicon-trash"></i><span>Delete</span></button>' +
                                '</div>' +
                            '</li>',
    });

我很难将当前项目的索引传递给模板，因为这些项目稍后会传递。

有没有人处理过这个问题或者可以看到解决方案？我目前正在尝试将文件名作为索引注入作为解决方案，但这不是我认为的最佳方式。

提前感谢您抽出时间提供帮助。

【问题讨论】：

您好，您找到解决方案了吗？我面临着类似的问题。可以使用一些帮助。谢谢
嗨@ShifaKhan，是的。我确实对此进行了排序。请参阅下面的回复。

标签： javascript jquery dropzone.js

【解决方案1】：

b我最后把这个排序了。

init: function() {

   this.on("success", function(file, responseText) {

       console.log(responseText);

       // Create the hidden fields
       // Created_at
       file.createdat = Dropzone.createElement("<input type=\"hidden\" class=\"form-control input-sm\" name=\"" + this.options.inputName + "[" + responseText.id + "][created_at]\" value=\"" + responseText.created_at + "\" />");
       file.previewElement.appendChild(file.createdat);
   }
}

在初始化功能上，您基本上是在等待成功上传的 Dropzone 的回复。因此，根据您的服务器端实现，您可以传回您想要的有关文件的任何数据。就我而言，我将其存储在数据库中并返回了行的信息。

从那里，为了将这些信息保存在当前帖子中，我只是创建了一些隐藏字段来存储数据，然后对我想要的每个隐藏字段重复上述操作。您当然可以为 alt 标签、标题或您喜欢的任何内容添加其他非隐藏字段。

我在 responseText 中的索引：this.options.inputName + "[" + responseText.id + "][created_at]

希望对你有帮助。

作为旁注，您也可以在加载已存储在服务器上的文件时执行相同的操作，您要为此特定帖子检索这些文件。只需 Google mockfile 和 dropzone，您就会发现一百万条结果对您有帮助。原理是一样的。

【讨论】：