javascript - Dropzone.js 如何使用 TR 或 TBODY 作为预览模板？

Question

有一个显示文件的表格(一个 tr 一个文件)，在表格上创建了​​一个 dropzonejs，所以我可以将文件拖放到表格上。我想添加一个“预览”作为表格的 TR 元素，但我不能这样做。这是我的预览模板的样子:

<tr class="dz-preview">
    <td><span class="name" data-dz-name></span></td>
    <td><span class="size" data-dz-size></span></td>
    <td colspan="5">
    <div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
        <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress>        </div>
    </div>
    </td>
</tr>

问题是 Dropzone.js 这样做:

Dropzone.createElement = function(string) {
    var div;
    div = document.createElement("div");
    div.innerHTML = string;
    return div.childNodes[0];
};

TR 或 TBODY 不是 DIV 的有效子项，因此它将被创建为 TEXT，TEXT 没有属性 querySelectorAll，并且存在错误。

是否有使用 TR 或 TBODY 作为预览模板的解决方案？

Answer 1

只需在您的代码中重新定义 Dropzone.createElement 函数即可。

在我的例子中，我使用 jQuery:

$(function() {
    Dropzone.createElement = function(string) {
        var el = $(string);
        return el[0];
    };

    var dropzone = new Dropzone(document.body, options);
});