在 dropzone 中的缩略图块内添加带有图像 URL 的隐藏输入答案

【问题标题】：Add an hidden input with image URL inside thumbnail bloc in dropzone在 dropzone 中的缩略图块内添加带有图像 URL 的隐藏输入
【发布时间】：2019-11-23 13:52:17
【问题描述】：

例如，我如何插入一个隐藏的 input 字段，该字段将包含使用 Dropzone 库上传的每个图像的 URL 在 <div class="dz-details"> 中。

var myDropzone = new Dropzone("#form_snippet_image", {
  url: _actionToDropZone,
  dictInvalidFileType: 'Ce fichier n\'est pas conforme. Il n\'est donc pas téléchargeable.',
  previewTemplate: document.querySelector('#thumbnail').innerHTML,
  acceptedFiles: ".png,.jpg,.gif,.jpeg",
  dictDefaultMessage: '<i class="msg-default-dropzone">Cliquer ou Déposer vos fichiers à télécharger ici.</i>',
  removedfile: function(file) {
    var name = file.upload.filename;
    $.ajax({
      // ... AJAX 
    },

【问题讨论】：

标签： javascript jquery twig dropzone

【解决方案1】：

嗯，Dropzone.js 的文档不是很好，但您似乎正在寻找 chunksUploaded 选项

https://www.dropzonejs.com/#config-chunksUploaded


var myDropzone = new Dropzone("#form_snippet_image", {
  ...
  chunksUploaded: function(file, done) {
    //add your input here

    //not sure if it will work
    let input = document.createElement("input");
    input.hidden = true;
    input.value = file.url;
    // cannot find informations about the file object
    // in the dropzone.js doc ...
    document.querySelector(".dz-details").appendChild(input);

    done();
  }
}

【讨论】：