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

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);
    });
});

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

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

Answer 1

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

这是一个jsfiddle这证明了这一点。

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