仅向容器添加唯一文件? [英] Only add unique files to container?
问题描述
我正在使用jQuery File Upload插件-我将自动上传文件上传设置为false，并且我的行为是在添加文件时，我建立了一个显示文件名的表格和一个删除按钮，以允许用户在上传之前删除文件.然后有一个上传所有文件"按钮?
I am using jQuery File Upload plugin - I have the auto upload file upload set to false and the behavior I have is that as files are added I build up a table showing the file name and a remove button to allow the user to remove the file before uploading. There is then an upload all files button?
因此，如果用户添加名为foo.txt的文件，则会创建一行.但是，如果他们再次添加foo.txt，它将创建另一行.我想检查该情况下的现有表，并向用户发出警报，而不要创建该行.
So if a user adds a file called foo.txt a row will be created. However if they add foo.txt again it will create another row. I want to check the existing table for that scenario and alert that to the user and not create the row.
到目前为止的上传代码是:
The code for the upload so far is:
$('#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> </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?
Note the add function gets called once for each file added which is what I want. However when I try to get the rows in the table I am getting a length of 0 all the time - even when I add a file to the table and then add another file - the second time hitting the add method rows length is still 0 when I was expecting it to be 1?
如果我能够在追加之前获得所有行，那么我想我必须在每行上执行$ .each，以根据行中的文件名检查当前文件名-如果它等于它们中的任何一个，则跳过而不运行附加代码，而是显示警报?
If I am able to get all the rows before I append then I guess I would have to do a $.each on each row to check the current file name against the filename in the row - if it equals any of them then skip out and not run the append code but instead display an alert?
推荐答案
我认为问题是'#files > tr'选择器.它选择所有<tr>元素，它们是#files元素的直接子元素，但不是直接子元素，因为浏览器会为您插入一个<tbody>元素.您可以尝试'#files > tbody > tr'或仅尝试'#files tr'.
I think the problem is the '#files > tr' selector. It selects all <tr> elements that are direct children of the #files element, but they aren't direct children because the browser inserts a <tbody> element in for you. You could try '#files > tbody > tr' or just '#files tr'.
下面是一个 jsfiddle 对此进行了演示.
Here's a jsfiddle that demonstrates this.
您可以自己添加<tbody>，然后安全地使用'#files > tbody > tr'.当然，您必须将调用更改为.append()，然后将新的<tr>附加到<tbody>而不是<table>.
You could add the <tbody> yourself and then safely use '#files > tbody > tr'. Of course, you would have to change the call to .append() then so the new <tr> gets appended to the <tbody> instead of the <table>.
这篇关于仅向容器添加唯一文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
