Question

我在网上发现这个脚本添加了多个文件输入字段，但是在点击“添加”按钮时我只想要最多六个字段。

但是，此脚本允许用户添加无限字段。如何将输入字段数限制为6，并提供默认消息，如：

您只能上传六张照片。

这是脚本：

<script type="text/javascript">
   $(document).ready(function(){
   $('.add_field').click(function(){
     var input = $('#input_clone');
     var clone = input.clone(true);
    clone.removeAttr ('id');
    clone.val('');
    clone.appendTo('.input_holder'); 
    });
 });
  </script>

和HTML：

    <span class="add_field">+</span>
    <span class="remove_field">-</span>
  <div class="input_holder">
    <input type="file" name="uploaded_files[]" id="input_clone"  />
  </div>

Answer 1

计算文件输入的数量，如果少于6，则允许添加另一个。尝试：

 $('.add_field').click(function () {
     if ($('input[type=file]').length < 6) {
         var input = $('#input_clone');
         var clone = input.clone(true);
         clone.removeAttr('id');
         clone.val('');
         clone.appendTo('.input_holder');
     } else { alert('Only six allowed.') }
 });

<强> jsFiddle example

Answer 2

例如，使用var counter

$(document).ready(function(){
   var counter = 0;
   $('.add_field').click(function(){
       if(counter <= 6)
           var input = $('#input_clone');
           var clone = input.clone(true);
           clone.removeAttr ('id');
           clone.val('');
           clone.appendTo('.input_holder'); 
           counter++;
      }else{
          alert('no more uploads!')      
      }
    });
 });

如何在上传图片时添加有限的多个输入字段

2 个答案: