javascript - 具有 div 表布局的 DropzoneJS

Question

一般问题:

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

解释:

我正在尝试让 DropzoneJS 以表格格式显示上传的文件。我的 Dropzone 正确地放在我的 table 上，但我无法正确显示 previewTemplate。首先，出现问题是因为 Dropzone 无法将文件添加到 <td></td>元素，所以我使用 CSS 将表格转换为这样的表格布局格式

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

因此，我的目标是向 DropzoneJS 添加一个预览模板，它看起来像这样

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

问题是 Dropzone 默认添加一组类 dz-processing dz-image-preview dz-error dz-success到 <div>在预览模板中。根据文档，它们将被添加到 <div> 中。与 class="dz-preview" ，但无论该类是否存在，其他类都会作为容器的第一个内部元素添加，previewTemplate 会被注入(inject)。这意味着应该是表格行的 previewTemplate 失去了它的属性，现在只显示第一个 <div class="div-td"> 的宽度。

+-------------+--------------+-----------+----------+
|             |              |           |          |   Existing row
+-------------+--------------+-----------+----------+
|             |              |           |          |   Existing row
+-------------+--------------+-----------+----------+
|             |              |           |          |   Existing row
+-------------+--------------+-----------+----------+
|             |              |           |          |   Existing row
+-------------+--------------+-----------+----------+
|   |   |  |  |                                         Row added by upload
+---+---+--+--+

发生这种情况是因为有一个额外的 <div>被添加到行的内部。

我的表格 CSS 看起来像这样

/* 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;
}

布局文档可在此处找到:http://www.dropzonejs.com/#layout

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

Answer 1

如 dropzone 文档中所述，您可以根据需要自定义预览模板，在这种情况下，您只需添加 div-tr和 div-td根据您的需要对预览元素进行分类，http://www.dropzonejs.com/#theming .

这里是一个如何覆盖 dropzone 模板的例子:

HTML:

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

js:

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'; 
        });
    }
}

请注意，如果您想使用表格，只需将预览中的元素用 <td> 包裹起来即可。和 <tr>并用作 previewsContainer表格而不是 div。

因为元素dz-error-mark和 dz-success-mark默认情况下在 dropzone 中始终可见，您可能希望根据事件隐藏它们，这就是 init 函数中的代码所做的。或者最好不要在开头显示它们并相应地显示它们。

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

Here您可以看到一个高度自定义的拖放区示例，拖放区文档中也提到了这一点。