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

Łuk*_*mus 3 html javascript jquery dropzone.js

有一个表显示文件(一个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>
Run Code Online (Sandbox Code Playgroud)

问题是Dropzone.js这样做:

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

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

有没有使用TR或TBODY作为预览模板的解决方案?

str*_*ker 6

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

在我的情况下,我使用jQuery:

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

    var dropzone = new Dropzone(document.body, options);
});
Run Code Online (Sandbox Code Playgroud)

  • @dhd,您可以重新定义此功能,而无需触摸任何插件文件 (2认同)