Need to limit how many files can be added

Here's a working demo: http://qwikad.com/test.php

Currently you can add any number of files. I need to limit it to 10. How would you accomplish this?

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).after($("<div/>", {id: 'filediv'}).fadeIn('slow').append(
                $("<input/>", {name: 'pic[]', type: 'file', id: 'file'}),       
                $("<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: 'images/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();
        }
    });
});

Code (markup):

 

Not sure if I know how to do that. Care to elaborate?

 

I would just add a global counter, and every time the add more event is executed increment by 1 and check if > 10, if so then don't show the new upload box.

 

Here's a final, working version (if anyone interested). If you need a simple image uploader that allows you to preview / delete images before the upload, check it out:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>

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() {
      if($('#im_container').children('.filediv').length<10){
        $(this).after($("<div/>", {class: 'filediv'}).fadeIn('slow').append(
                $("<input/>", {name: 'pic[]', type: 'file', id: 'file'}),      
                $("<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: 'images/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();
        }
    });
});


</script>
      

<style>

.upload{
    background-color: #0083EF;
    border: 1px solid #0083EF;
    color: #fff;
    border-radius: 5px;
    padding: 5px 10px 5px 10px;
    text-shadow: 1px 1px 0px #0064B7;
    box-shadow: 1px 1px 14px rgba(0,0,0, .75);
}
.upload:hover{
    cursor: pointer;
    background: #0073E0;
    border: 1px solid #0073E0;
    box-shadow: 1px 1px 14px rgba(0,0,0, .75);
}
#file{

    padding: 5px; border: 1px solid #CCCCCC;
    background-color: #F9F9F9;
}


#img{
float: right;
    width: 17px;
    border: none;
    height: 17px;
    margin: 0px 0px 0px 10px;

}

.abcd{

    width: 200px;
    height: 160px;
    text-align: center;
}

.abcd img{

    background-repeat: no-repeat;
    max-height: 150px;
    max-width: 150px;
    padding: 5px;
    border: 1px solid #CCCCCC;

}


#add_more{
    margin-bottom: 20px;
}


#im_container{

    width: 800px;
}

</style>


<div id="im_container">



                 <input type="button" id="add_more" class="upload" value="Add More Files">

                 <div class="filediv"><input  name="pic[]" type="file" class="file" id="file"></div>


</div>

Code (markup):

Thanks Deadweight: http://www.dynamicdrive.com/forums/...w-many-files-can-be-added&p=307798#post307798