Question

我正在使用jQuery文件上传插件 - 我将自动上传文件上传设置为false，我的行为是在添加文件时我建立了一个显示文件名的表和一个删除按钮以允许用户上传前删除文件。然后有一个上传所有文件按钮？

因此，如果用户添加名为foo.txt的文件，则会创建一行。但是，如果他们再次添加foo.txt，它将创建另一行。我想检查该场景的现有表，并向用户发出警告，而不是创建行。

目前上传的代码是：

$('#uploadFile').fileupload({
    replaceFileInput: false,
    singleFileUploads: true,
    add: function(event, data) {
        $.each(data.files, function (index, file) {
          var rows = $('#files > tr'); // always getting length 0??

          data.url = myUrl;
          data.type = 'POST';
          data.context = $('<tr>'
            + '<td><strong>Selected File : </strong>' + file.name + '</td>'
            + '<td>&nbsp;</td>'
            + '<td><button type="button" class="removeBtn btn btn-default">'
            + '<span class="glyphicon glyphicon-remove-circle"></span>'
            + 'Remove File</button></td>'
            + '</tr>')
          .appendTo('#files')
          .data('data', data);
    });
});

请注意，为每个添加的文件调用add函数一次，这就是我想要的。然而，当我尝试获取表中的行时，我总是得到0的长度 - 即使我向表中添加文件然后添加另一个文件 - 第二次按下add方法时行长度仍为0我原以为是1？

如果我能够在追加之前获取所有行，那么我想我必须在每一行上执行$ .each来检查当前文件名与行中的文件名 - 如果它等于其中任何一行那么跳过并不运行追加代码，而是显示警告？

Answer 1

我认为问题是'#files > tr'选择器。它会选择<tr>元素的直接子元素的所有#files元素，但它们不是直接子元素，因为浏览器会为您插入<tbody>元素。您可以尝试'#files > tbody > tr'或仅'#files tr'。

这是展示这一点的jsfiddle。

您可以自己添加<tbody>，然后安全地使用'#files > tbody > tr'。当然，您必须将通话更改为.append()，以便将新的<tr>附加到<tbody>而不是<table>。

只将唯一文件添加到容器中？

1 个答案: