Need to limit how many files can be added

**qwikad.com** · 07-05-2014, 01:55 AM

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?

Code:

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();
        }
    });
});

**Deadweight** · 07-06-2014, 01:45 AM

Here is an example. Tell me if this is what you are looking for.

index.html

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Count After</title>
<script src="../js/jquery.js"></script>
<script src="append.js"></script>

<style>
#fileContainer, #append { border:1px solid black; width: 150px;}
#fileContainer {margin-top: 2px;}
#append { cursor:pointer;}
</style>

</head>
<body>
<div id="append">Add More Files</div>
<div id="fileContainer">
<div class="file">Add</div>
</div>
</body>
</html>

append.js

Code:

$(function(){
	
	$(document).on('click','#append',function(){
		var count = $('#fileContainer').children('.file').length;
		if(count<10)
			appendFile('#fileContainer','file');
	})
	
})

function appendFile(area, style){
	$(area).append('<div class="'+style+'">Add</div>')
}

FYI do not use id for multiple styling. Use class.

**qwikad.com** · 07-06-2014, 03:39 PM

It is. But I have no idea how to integrate it into the existing code.

Keep in mind that it should allow to have up to 10 files at any time. If let's say I cancel an image and that file field goes away, I should be able to add a new one. That's what the current code allows.

**Deadweight** · 07-06-2014, 05:32 PM

It doesnt matter if you cancel an image because it checks the current count inside the div once it is clicked.

Code:

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

Please change id="filediv" to class="filediv" once you change that then use this

Code:

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

**qwikad.com** · 07-06-2014, 05:44 PM

Working great. Thank you so much!

**Deadweight** · 07-06-2014, 06:41 PM

Just letting you know in your body you have <div id="filediv">...</div> You also need to change the beginning to class="filediv" because currently it is giving you 11 not 10 due to that problem.