使用 Jquery 限制以表单形式克隆的文件输入

Question

我使用这个 Jquery 函数来克隆表单中的文件输入字段，

$(function() {
    var scntDiv = $('#clone');
    var i = $('#clone p').size() + 1;

    $('#addImg').live('click', function() {
            $('<p><label for="attach"><input type="file" name="attachment_'+ i +'"  /> <a href="#" id="remImg">Remove</a></label></p>').appendTo(scntDiv);
            i++;
            return false;
    });

    $('#remImg').live('click', function() {
            if( i > 2 ) {
                    $(this).parents('p').remove();
                    i--;
            }
            return false;
    });
});

是否可以限制可以克隆的字段？假设有 4 个字段？

非常感谢，
菲利普

Answer 1

例如，首先在添加输入的函数中使用它：

if($('input[name^="attachment_"]').length>=4){return false;}

它使用以 attachment_ 开头的名称属性对输入进行计数，如果找到 4，则离开该函数。

此外：您不应该对克隆的元素使用 ID，因为 ID 必须是唯一的，但在本例中它们不是唯一的。使用其他属性，例如 class 或 name。

Answer 2

除了 Dr.Molle 的回答之外...检查/限制服务器端输入字段的数量。因为JS可以在客户端操作..

Answer 3

要真正正确处理它，您需要其他东西，如下所示：

$(function() {
    $('#addImg').live('click', function(e) {
       for(var i=1; i<5; i++) { 
         if ($('#clone input[name="attachment_'+i+'"]').length == 0) break;
         if(i == 4) return false;
       }
       $('<p><label><input type="file" name="attachment_'+ i +'"  /> <a href="#" class="remImg">Remove</a></label></p>').appendTo('#clone');
       e.preventDefault();
    });

    $('#clone').delegate('.remImg', 'click', function(e) {
       if($('#clone input[name^="attachment_"]').length > 1) {
          $(this).closest('p').remove();
       }
       e.preventDefault();
    });
});

您可以对其进行测试（查看生成的 HTML /节点）在这里。

它会循环执行什么操作并找到第一个可用的 i 来使用。您的原始代码假设最后一个始终是被删除的，但情况可能并非如此，并且您仍然会遇到重复的数字。相反，这个循环会获取第一个可用索引并使用它...如果我们到达 4 并且它们都在使用中，则中止（您可以添加一个 alert() 或 if 中的内容（如果您愿意的话）。

另请注意 remImg 类的使用，因为它是重复的，以及 .delegate() 效率更高一点...您也可以使用普通的 #addImg 上的“nofollow">.click() 处理程序，但我不能 100% 确定它在此处的位置。