Dropzone 5.2.0如何添加自定义属性（如文件哈希）并在页面显示？

你的思路完全正确！要在Dropzone 5.2.0中实现加载已有文件时显示自定义属性（比如hash或foo:'bar'），需要结合自定义预览模板和手动填充自定义属性值两个步骤来完成，下面一步步拆解：

1. 配置Dropzone使用自定义预览模板 #

首先得让Dropzone知道要用你定义的模板来渲染文件预览，有两种便捷方式：

方式一：直接在JS中传入模板字符串 #

把你的HTML模板转成字符串，通过previewTemplate选项传给Dropzone：

$(document).ready(function(){
  // 定义自定义预览模板字符串
  const customPreviewTemplate = `
    <div class="dz-preview dz-file-preview"> 
      <div class="dz-details"> 
        <div class="dz-filename"><span data-dz-name></span></div> 
        <div class="dz-size" data-dz-size></div> 
        <div class="dz-hash" data-dz-hash></div> 
        <div class="dz-foo" data-dz-foo></div> 
        <img data-dz-thumbnail /> 
      </div> 
      <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div> 
      <div class="dz-success-mark"><span>✔</span></div> 
      <div class="dz-error-mark"><span>✘</span></div> 
      <div class="dz-error-message"><span data-dz-errormessage></span></div> 
    </div>
  `;

  var mydropzone = new Dropzone("#my-dropzone", { 
    previewTemplate: customPreviewTemplate, // 指定使用自定义模板
    init: function () { 
      var existingFile = getExistingFile(); 
      var self = this; 
      if (existingFile != null) { 
        var size = existingFile.Length; 
        var name = existingFile.Name; 
        var hash = existingFile.Hash; 
        // 给文件对象添加自定义属性
        const existingDropzoneFile = { 
          name: name, 
          size: size, 
          type: 'txt', 
          hash: hash, 
          foo: 'bar' 
        }; 
        // 触发添加文件事件，生成预览元素
        self.emit("addedfile", existingDropzoneFile);
        // 手动将自定义属性值填充到预览模板中
        const latestPreview = self.previews[self.previews.length - 1]; // 获取刚创建的预览元素
        latestPreview.querySelector('[data-dz-hash]').textContent = existingDropzoneFile.hash;
        latestPreview.querySelector('[data-dz-foo]').textContent = existingDropzoneFile.foo;
        // 可选：如果需要显示缩略图，触发thumbnail事件
        self.emit("thumbnail", existingDropzoneFile, "/path/to/your/thumbnail.jpg"); // 替换为实际缩略图路径
        // 标记文件为已上传状态，显示成功标记
        existingDropzoneFile.status = Dropzone.SUCCESS;
        self.emit("complete", existingDropzoneFile);
      } 
    } 
  });
});

方式二：在页面中放置模板，通过选择器引用 #

如果不想把模板写在JS字符串里，可以把模板放在页面的隐藏容器中：

<!-- 页面中的自定义模板，隐藏起来 -->
<div id="custom-dropzone-template" style="display: none;">
  <div class="dz-preview dz-file-preview"> 
    <div class="dz-details"> 
      <div class="dz-filename"><span data-dz-name></span></div> 
      <div class="dz-size" data-dz-size></div> 
      <div class="dz-hash" data-dz-hash></div> 
      <div class="dz-foo" data-dz-foo></div> 
      <img data-dz-thumbnail /> 
    </div> 
    <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div> 
    <div class="dz-success-mark"><span>✔</span></div> 
    <div class="dz-error-mark"><span>✘</span></div> 
    <div class="dz-error-message"><span data-dz-errormessage></span></div> 
  </div>
</div>

然后在JS中引用这个模板的内容：

$(document).ready(function(){
  var mydropzone = new Dropzone("#my-dropzone", { 
    previewTemplate: document.querySelector("#custom-dropzone-template").innerHTML,
    init: function () { 
      var existingFile = getExistingFile(); 
      var self = this; 
      if (existingFile != null) { 
        var size = existingFile.Length; 
        var name = existingFile.Name; 
        var hash = existingFile.Hash; 
        const existingDropzoneFile = { 
          name: name, 
          size: size, 
          type: 'txt', 
          hash: hash, 
          foo: 'bar' 
        }; 
        self.emit("addedfile", existingDropzoneFile);
        // 填充自定义属性值
        const latestPreview = self.previews[self.previews.length - 1];
        latestPreview.querySelector('[data-dz-hash]').textContent = existingDropzoneFile.hash;
        latestPreview.querySelector('[data-dz-foo]').textContent = existingDropzoneFile.foo;
        // 缩略图和状态处理
        self.emit("thumbnail", existingDropzoneFile, "/path/to/thumbnail.jpg");
        existingDropzoneFile.status = Dropzone.SUCCESS;
        self.emit("complete", existingDropzoneFile);
      } 
    } 
  });
});

2. 关键注意事项 #

• Dropzone默认只会自动填充它内置的data-dz-*属性（比如data-dz-name、data-dz-size），自定义属性需要我们手动通过DOM操作填充值。
• 给已有文件设置status: Dropzone.SUCCESS并触发complete事件，能让预览显示成功标记，符合已上传文件的状态逻辑。
• 如果需要批量处理多个已有文件，只需要循环遍历文件列表，重复上述添加和填充步骤即可。

这样修改后，你的自定义hash和foo属性就能在文件预览中正常显示了！

内容的提问来源于stack exchange，提问作者Pea Kay See Es