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

Question

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

但是，此脚本允许用户添加无限的字段。如何将输入字段的数量限制为六个并给出默认消息，例如：

您只能上传六张图片。

这是脚本：

<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

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

 $('.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 示例

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