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

Question

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

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 
    },

Answer 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();
  }
}

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

Add an hidden input with image URL inside thumbnail bloc in dropzone

javascript

jquery

twig

dropzone