Question

我正在使用jQuery Dropzone plugin。在dropzone下我有一个带有这样的标记的表

<table id="data">
    <tr>
        <td>Name</td>
        <td>Email</td>
        <td>Phone</td>
    </tr>
</table>

假设我在dropzone中删除了3个文件，所以我希望输入字段有3行显示在表中。所以为此我已经让我的js像这样

Dropzone.options.documentDropzone = {
    init: function () {
        this.on("complete", function (file) {
            if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
                var Length = this.getAcceptedFiles().length; // To get the number of files in the dropzone
                // Loop to add number of rows after adding files to dropzone
                for(i=0; i < Length; i+) {
                            var html = $('<tr><td><input type=\"text\" name=\"name\"></td><td><input type=\"text\" name=\"email\"></td><td><input type=\"text\" name=\"phone\"></td></tr>');
                            $('table#data').append(html);
                        }
            }
        }
    }
}

这里的工作正常，比如说我第一次添加了3个文件，所以它很好地添加了3行。另一次让我说我添加了2个文件。所以在dropzone我现在有3 + 2 = 5个文件。所以它应该显示5个文件行。但它首先显示3个文件，然后当我添加另外2个文件然后它显示3 +（3 + 2）= 8.所以有人能告诉我如何解决这个问题吗？任何帮助和建议都会非常值得一提。感谢

Answer 1

使用removeAllFiles方法将计数器重置为0;假设你正在使用你的表来显示上传的文件，而不是dropzone本身。

this.on('complete', function() {
    if (! this.getUploadingFiles().length && ! this.getQueuedFiles().length) {
        var Length = this.getAcceptedFiles().length;
        for (var i = 0; i < Length; i++) {
            var html = $('<tr><td><input type=\"text\" name=\"name\"></td><td><input type=\"text\" name=\"email\"></td><td><input type=\"text\" name=\"phone\"></td></tr>');
            $('table#data').append(html);
        }
        this.removeAllFiles();
    }
});

编辑：似乎误解了这个问题，对不起。你可以在添加新文件时重新绘制表格，就像在执行$('table#data').html(html)时一样 - 但是这有缺点就是清除表单中已有的内容，丢失任何活动/焦点状态等。根据我对Dropzone的体验，你必须致电removeAllFiles以停止跟踪旧版上传内容。因此，如果您只使用Dropzone作为上传文件的手段而不是将其用于显示器，那么我会按照上面的建议继续使用。

Dropzone是否添加了行数以及添加到dropzone的文件数？

1 个答案: