带有div表布局的DropzoneJS

Question

的一般问题：

在Dropzone中添加的行在默认情况下被包装在破坏我的表布局的元素中时，如何才能填充表的全部宽度。

解释：

我试图让DropzoneJS以表格格式显示上传的文件。我的Dropzone在我的桌子上是正确的，但是我不能让previewTemplate正确地呈现出来。首先，出现这个问题是因为Dropzone不能将文件添加到<td></td>元素中，所以我使用CSS将表转换为如下表布局格式

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

因此，我的目标是将一个previewTemplate添加到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添加到previewTemplate中的<div>中。根据这些文档，它们将被添加到带有<div>的class="dz-preview"中，但是不管这个类是否存在，其他类都是作为容器的第一个内部元素添加的，previewTemplate被注入其中。这意味着，本应是表行的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

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

下面是一个如何覆盖下拉区域模板的示例：

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>

联署材料：

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在下拉区域中都是可见的，因此您可能希望根据事件隐藏它们，这就是init函数中的代码。或者也许最好不要在开始的时候展示它们，并相应地展示它们。

请记住，当您在模板中进行更改时，如果您不修改下拉区域的默认行为，就会开始不正确地显示。

这里您可以看到一个大量定制的下拉区域的示例，在下拉区域文档中也提到了这个示例。

Answer 2

我已经解决了这个问题，wallek876的回答给了我正确的方向，所以这将是公认的答案。

解决这个问题的答案中的细节是，我看到dropzone-previews位于表的外部而不是底部，在那里应该添加新元素。

解决方案：

我像这样将upload-container作为id移到<div class="div-table" id="upload-container">中。

我按照建议保留了<div id="preview-template">，并将<div class="div-tr">应用于previewTemplate的第一个子级。这个结构返回了表布局，其余的样式是使用CSS应用的。

我没有设法将previewTemplate放到HTML中。

Answer 3

使用适当的table标记与caption、tr、td等一起使用对可访问性用户非常重要。可以修改下拉区域库以更好地支持表(即具有以<tr>标记开头的模板)。

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

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