僅向容器添加唯一文件？

我正在使用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的長度 - 即使向表中添加文件然後添加另一個文件時 - 第二次觸及添加方法行的長度仍爲0我期待它是1？

如果我能夠在添加所有行之前追加，那麼我想我必須在每行上執行$ .each來檢查當前文件名與行中的文件名 - 如果它等於它們中的任何一個然後跳過並不運行附加代碼，而是顯示一個警報？

來源

2014-12-03 TheRiddler

您也可以考慮將每個文件名用類名「文件名」包裝在一個範圍內，以便稍後訪問，或將文件名存儲在對象中。取決於表格狀態是否保持。 – Will 2014-12-04 00:40:20

我認爲問題是'#files > tr'選擇器。它會選擇#files元素的直接子元素的所有<tr>元素，但它們不是直接子元素，因爲瀏覽器會爲您插入<tbody>元素。你可以試試'#files > tbody > tr'或者只是'#files tr'。

這是一個jsfiddle，演示了這一點。

您可以自己添加<tbody>，然後安全地使用'#files > tbody > tr'。當然，您必須將呼叫更改爲.append()，然後將新的<tr>附加到<tbody>而不是<table>。

來源

2014-12-03 23:49:08

僅向容器添加唯一文件？

回答

相關問題