Javascript 具有div表布局的DropzoneJS

一般问题：

在默认情况下，当Dropzone中添加的行被包装在破坏表布局的元素中时，如何让它填充表的整个宽度

说明：

我试图让DropzoneJS以表格格式显示上传的文件。我的Dropzone正确地显示在我的表上，但我无法使previewTemplate正确显示。 首先，这个问题是因为Dropzone无法将文件添加到

元素中，所以我使用CSS将我的表转换为这样的表布局格式

<div class="div-tr">
    <div class="div-td"></div>
    <div class="div-td"></div>
</div>

这是因为添加了一个额外的

，用于包装行的内部

我的表格CSS如下所示

<div class="div-tr">
    <div class="div-td">
        <i class="fa fa-file-o"></i>
    </div>
    <div class="div-td">
        <div class="dz-filename">
            <span data-dz-name></span>
        </div>
    </div>
    <div class="div-td">
        <div class="dz-size" data-dz-size></div>
    </div>
    <div class="div-td">
        <div class="dz-progress">
            <span class="dz-upload" data-dz-uploadprogress></span>
        </div>
    </div>
    <div class="div-td">
        <div class="dz-success-mark">
            <span>✔</span>
        </div>  
        <div class="dz-error-mark">
            <span>✘</span>
        </div>
    </div>
</div>

/* DIV table style */

.div-table{
     display: table;
     width: 100%;
     background-color: #fff;
}
.div-tr{
    display: table-row;
}
.div-th, .div-td {
    display: table-cell;
    padding: 8px 15px;
    border-bottom: 1px solid #eaeff0;
    vertical-align: middle;
}
.div-thead{
    display: table-header-group;
    font-weight: bold;
}
.div-tfoot{
    display: table-footer-group;
    font-weight: bold;
    background-color: #fff;
}
.div-tbody{
    display: table-row-group;
}

布局的文档可在此处找到：

---

感谢您对更改CSS或JS的任何帮助。

如dropzone文档中所述，您可以根据需要自定义预览模板，在这种情况下，您只需根据需要将您的

div tr

和

div td

类添加到预览元素中即可

以下是如何覆盖dropzone模板的示例：

Html:

请注意，如果要使用表，只需使用

和

包装预览中的元素，并将其用作

previewsContainer

表而不是div即可

由于默认情况下，元素

dz error mark

和

dz success mark

在dropzone中始终可见，因此您可能希望根据事件将它们隐藏起来，这就是init函数中的代码的作用。或者最好不要在开始时显示它们，并相应地显示它们

请记住，当您在模板中进行更改时，如果您不同时修改dropzone的默认行为，事情将开始无法正确显示

---

您可以看到一个高度定制的dropzone示例，dropzone文档中也提到了这个示例。

我已经解决了这个问题，来自wallek876的答案给了我正确的方向，因此它将是公认的答案

答案中的细节解决了这个问题，我看到

dropzone previews

位于表的外部，而不是底部，在底部应该添加新元素

解决方案：

我将

上传容器作为id移动到了
，就像这样

我按照建议保留了
，并将
作为
预览模板的第一个子级应用。这个结构将表格布局还原，剩下的样式是使用CSS应用的

我没有将previewTemplate放到HTML中。
使用适当的
表
标记和
标题
，
tr
，
td
等对易访问性用户很重要。
dropzone库可以修改以更好地支持表（即具有以
标记开头的模板）

重写Dropzone.createElement函数（如果模板是
tr
，则使用
tbody
块元素而不是
div
块元素）：

//修复createElement，使其与表一起工作
//从字符串创建元素
Dropzone.createElement=函数（字符串）{
var ele=document.createElement（string.startsWith("我已经尝试了你所建议的一切，并浏览了所有这些链接。我最初将整个内容作为一个包含真实表元素的表，但在将其用作Bower依赖项后，我得到了以下错误
dropzone.min.js:1 Uncaught TypeError:a.previewElement.querySelectorAll不是一个函数
。我对此进行了调查并发现每个人都在写它不可能是表元素。如果我使用你发布的JS示例，那么我会发现
innerHTML是未定义的
，我猜这是因为它是一个有角度的应用程序。你有关于为什么会发生这些事情的提示吗？我将进一步调查。当我添加InnerHTML语句，我发现这是因为在实例化时没有加载DOM。我尝试用$timeout和类似的方法来解决这个问题，但我不断得到更多的错误。@nicolaib我看到你已经明白了，只是想指出你得到的错误，就像你说的，可能是因为e元素还没有加载，为了避免这种情况，我建议在html正文的末尾加载脚本，就在
关闭正文标记之前。
/* DIV table style */

.div-table{
     display: table;
     width: 100%;
     background-color: #fff;
}
.div-tr{
    display: table-row;
}
.div-th, .div-td {
    display: table-cell;
    padding: 8px 15px;
    border-bottom: 1px solid #eaeff0;
    vertical-align: middle;
}
.div-thead{
    display: table-header-group;
    font-weight: bold;
}
.div-tfoot{
    display: table-footer-group;
    font-weight: bold;
    background-color: #fff;
}
.div-tbody{
    display: table-row-group;
}

<div class="dropzone" id="myDropzone"></div>

    <div class="dropzone-previews div-table"></div>

    <div id="preview-template" style="display: none;">
        <div class="dz-preview dz-file-preview div-tr">
            <div class="dz-details">
                <div class="dz-filename div-td"><span data-dz-name></span></div>
                <div class="dz-size div-td" data-dz-size></div>
                <div class="dz-image div-td">
                    <img data-dz-thumbnail />
                </div>
            </div>
            <div class="dz-progress div-td"><span class="dz-upload" data-dz-uploadprogress></span></div>
            <div class="div-td">
                <div class="dz-success-mark"><span>✔</span></div>
                <div class="dz-error-mark"><span>✘</span></div>
            </div>
            <div class="dz-error-message div-td"><span data-dz-errormessage></span></div>
        </div>
    </div>

Dropzone.options.myDropzone = {
    previewsContainer: ".dropzone-previews",
    previewTemplate: document.getElementById('preview-template').innerHTML,
    url: 'upload.php',
    init: function() {
        this.on('success', function(file){
            var errordiv = document.getElementsByClassName('dz-error-mark');
            errordiv[errordiv.length - 2].style.display = 'none'; // The -2 is because there is also one in the preview-template
        });
        this.on('error', function(file){
            var succesdiv = document.getElementsByClassName('dz-success-mark');
            succesdiv[succesdiv.length - 2].style.display = 'none'; 
        });
    }
}

// Fix the createElement so it works with tables
// Creates an element from string
Dropzone.createElement = function(string){
  var ele = document.createElement(string.startsWith("<tr") ? "tbody" : "div");
  ele.innerHTML = string;
  return ele.childNodes[0];
};