如何在 dropzone js 中制作自定义预览模板答案

【问题标题】：How to make custom preview template in dropzone js如何在 dropzone js 中制作自定义预览模板
【发布时间】：2017-04-04 19:19:58
【问题描述】：

我想知道如何制作自定义预览模板。文档没有很好地解释一切，我搜索了关于我没有找到任何东西的教程。

更新

我的html

<div id="dropzone">
  <div id="template-preview">
    <img src="assets/images/icons/plus-icon-white.png" alt="" />
    <span>Choose or drop  file from your computer</span>
    <div class="dz-preview dz-file-preview well" id="dz-preview-template">
      <div class="dz-details">
        <div class="dz-filename"><span data-dz-name></span></div>
        <div class="dz-size" data-dz-size></div>
      </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>
</div>

我的js

var drop = $('#dz-preview-template').html();
$('#dropzone').dropzone({
   url: "/upload",
   maxFilesize: 100,
   paramName: "uploadfile",
   maxThumbnailFilesize: 5,
   previewTemplate: drop,
   previewsContainer: "#template-preview"
});

【问题讨论】：

请解释更多，你想要达到什么。您是否已经有示例代码？您是否已经在 dropzone.js 页面上看到了解释？ dropzonejs.com/#Layout
检查我的问题@dns_nx的更新
请看我的更新。我想，我发现了错误。

标签： javascript dropzone.js

【解决方案1】：

对于 dropzone.js 版本 5.5.0，您只需创建一个 ID 为 tpl 的 div 然后将模板放入其中。当你定义 dropzone 时，只需像这样设置它：

var myDropzone = new Dropzone(
    "div#div_submit",
    {
        url: "mypage.aspx",
        previewTemplate : document.querySelector('#tpl').innerHTML
    }
);

【讨论】：

【解决方案2】：

对我来说，它适用于

previewTemplate: document.getElementById('preview-template').innerHTML

但我认为它应该与在jQuery 中使用html() 函数相同。我与您的代码唯一不同的是，之前将 autodiscover 设置为 false。也许这对你也有帮助？

Dropzone.autoDiscover = false;
var uploadLogo = new Dropzone("div#uploadLogo", {
                                url: "../uploads/logo"
                                , method: "post"
                                ,...
                                ,previewTemplate: document.getElementById('preview-template').innerHTML
                                ,...
});

更新

现在我想，我知道你的代码出了什么问题。您已将模板的代码放在dropzone div 中。放在外面。那么它应该可以工作了。

<div id="dropzone"></div>
<div id="template-preview">
        <div class="dz-preview dz-file-preview well" id="dz-preview-template">
                <div class="dz-details">
                        <div class="dz-filename"><span data-dz-name></span></div>
                        <div class="dz-size" data-dz-size></div>
                </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>

为你的dropzone区域显示的文本，你可以在初始化dropzone时设置：

$('#dropzone').dropzone({
                    ...
                    , dictDefaultMessage: "Choose or drop  file from your computer"

【讨论】：

只是一个更正，您存储模板的 div 称为模板预览，但在 javascript 中您称为 previewTemplate：document.getElementById('preview-template').innerHTML。 , 否则有效
感谢您的提示！将我的 di 放在 dropzone 之外，成功了！