Javascript Jquery/Dropzone.js获取添加图像的当前索引
我正在构建一个自定义Dropzone.js:layout。上传效果很好。我想以Dropzone用于特定帖子的形式保存其他数据 我需要对数组进行索引,以便所有发布的数据都与数组相关 “previewTemplate”仅允许字符串-无函数 例如:lead_图像[此处索引][文件名]Javascript Jquery/Dropzone.js获取添加图像的当前索引,javascript,jquery,dropzone.js,Javascript,Jquery,Dropzone.js,我正在构建一个自定义Dropzone.js:layout。上传效果很好。我想以Dropzone用于特定帖子的形式保存其他数据 我需要对数组进行索引,以便所有发布的数据都与数组相关 “previewTemplate”仅允许字符串-无函数 例如:lead_图像[此处索引][文件名] uploader.dropzone({ url: "/admin/upload", acceptedFiles: 'image/*', thumbnailWidth: 80
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>',
});
我很难将当前项的索引传递给模板,因为这些项稍后将被传递
有没有人处理过这个问题,或者能找到解决办法?我目前正在尝试将文件名作为索引作为解决方案注入,但在我看来,这并不是最好的方法
提前感谢您抽出时间提供帮助。最后,我整理了一下
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);
}
}
在init函数中,您基本上是在等待Dropzone返回成功上传的消息。因此,根据您的服务器端实现,您可以传回有关该文件的任何数据。在我的例子中,我将其存储在数据库中并返回行的信息
为了在当前帖子中保存这些信息,我只创建了一些隐藏字段来存储数据,然后对我想要的每个隐藏字段重复上述操作。当然,您可以为alt标记、标题或任何您喜欢的内容添加其他非隐藏字段
我在responseText中的索引:this.options.inputName+[+responseText.id+][created_at]
希望能有帮助
作为补充说明,在加载存储在服务器上的文件时,您也可以执行相同的操作,以便为此特定文章检索这些文件。只要谷歌mockfile和dropzone,你就会发现一百万条搜索结果对你有帮助。原理是一样的。嗨,你找到解决办法了吗?我面临着类似的问题。我需要一些帮助。谢谢ShifaKhan,是的。我做了分类。请看下面的回复。