Come inserire il limite massimo in un javascript?

Question

Ecco la parte del mio modulo che carica più immagini. Ha un pulsante aggiungi di più, che apre un nuovo campo di input. Ogni volta che l'utente fa clic su aggiungi altro pulsante, viene aperto un nuovo campo di input. Tuttavia, mi auguro che dopo il campo di immissione 5 ° è aperto, e l'utente fa clic su aggiungere più di nuovo, nessun nuovo campo dovrebbe avere aperto (cioè voglio limitare la dimensione del campo di input per 5)

<div id="formdiv"> 
    <form enctype="multipart/form-data" action="" method="post"> 
     <div id="filediv"><input name="file[]" type="file" id="file"/></div><br/> 
      <input type="button" id="add_more" class="upload" value="Add More Files"/> 
      <input type="submit" value="Upload File" name="submit" id="upload" class="upload"/> 
    </form> 
</div> 

javascript che gestisce il funzionamento

var abc = 0; //Declaring and defining global increement variable 

$(document).ready(function() { 

//To add new input file field dynamically, on click of "Add More Files" button below function will be executed 
    $('#add_more').click(function() { 
     $(this).before($("<div/>", {id: 'filediv'}).fadeIn('slow').append(
       $("<input/>", {name: 'file[]', type: 'file', id: 'file'}),   
       $("<br/><br/>") 
       )); 
    }); 

//following function will executes on change event of file input to select different file 
$('body').on('change', '#file', function(){ 
      if (this.files && this.files[0]) { 
       abc += 1; //increementing global variable by 1 

       var z = abc - 1; 
       var x = $(this).parent().find('#previewimg' + z).remove(); 
       $(this).before("<div id='abcd"+ abc +"' class='abcd'><img id='previewimg" + abc + "' src=''/></div>"); 

       var reader = new FileReader(); 
       reader.onload = imageIsLoaded; 
       reader.readAsDataURL(this.files[0]); 

       $(this).hide(); 
       $("#abcd"+ abc).append($("<img/>", {id: 'img', src: 'img/x.png', alt: 'delete'}).click(function() { 
       $(this).parent().parent().remove(); 
       })); 
      } 
     }); 

//To preview image  
    function imageIsLoaded(e) { 
     $('#previewimg' + abc).attr('src', e.target.result); 
    }; 

    $('#upload').click(function(e) { 
     var name = $(":file").val(); 
     if (!name) 
     { 
      alert("First Image Must Be Selected"); 
      e.preventDefault(); 
     } 
    }); 
}); 

Qualcuno può aiutarmi ad applicare questo limite massimo?

Answer 1

È necessario impostare un contatore su questo. puoi aggiornare il tuo codice come segue.

var count=0; 

    $('#add_more').click(function() { 

if(count<5) 
{ 
     $(this).before($("<div/>", {id: 'filediv'}).fadeIn('slow').append(
       $("<input/>", {name: 'file[]', type: 'file', id: 'file'}),   
       $("<br/><br/>") 
       )); 
count++; 

} 
    });