how to control multiple uploads to count 5

Question

I want to upload images for adding property and have some code in which i am able to add more than 5 file uploads. How can stop the uploads at five. here is the sample code i am using

<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>

and the js code for add button is

$('#add_more').click(function() {
$(this).before($("<div/>", {id: 'filediv'}).fadeIn('slow').append(
$("<input/>", {name: 'file[]', type: 'file', id: 'file'}),        
$("<br/><br/>")
));
});

how can i stop add more button can be available for only five.

Answer 1

Before adding the input, check if there are 5 in de div with id filediv. So yes, stop with return.

I've changed and simplified your code, so the input fields will be added and count in one div (div#filediv).

$('#add_more').click(function() {
   if ($('div#filediv').find('input[type="file"]').length >= 5)
      return;
   $('div#filediv').append(
      $('<input/>', {name: 'file[]', type: 'file', id: 'mustBeUniquePerPage'})
   );
});

Make sure that you use unique id's per page!

More efficient solution, less DOM and memory intensive:

var totalFilesAdded = 0;
$('#add_more').on('click', function() {
   if (totalFilesAdded >= 5)
      return;
   $('div#filediv').append(
      $('<input/>', {name: 'file[]', type: 'file', id: 'mustBeUniquePerPage'})
   );
   totalFilesAdded++;
});

Read here more why you better use .on('click') vs .click(): Difference between .on('click') vs .click()

Answer 2

The most important consideration here is that you can only really restrict the number of file uploads on the server. No Javascript or HTML will ever prevent users uploading more than 5 files. You need to set limits on the server.

The max_file_uploads PHP.ini directive allows you to limit the number of files sent via a POST request to the PHP file processing uploads. Even this will only restrict how many files are uploaded in a single POST request. You also need to track in your database/file system how many have been uploaded already and check these limits are not breached.

The name attribute you have give to your input element (file[]) implies the use of a multiple upload facility, but your HTML does not have the multiple attribute. You can either have a multiple file upload in which users can upload all 5 images at once, or keep doing it as you are and check how many input fields have been generated (I won't post code for this as another answer already has).

Either way please remember that you will still need to check how many files have already been uploaded, as everything in HTML and Javascript can be bypassed.

Answer 3

You can use global variable as a counter and initialize it to 0. On click increment the counter. Before adding any property just check if count is less than 5.

var counter = 0;
$('#add_more').click(function() {
counter = counter+1;
if(counter<=5){
$(this).before(...)
}
)};