HTML5 input type file, how can I increase the amount of files i can upload?

I am working on a form, where a user can upload files. Only issue is I want the user to be able to upload more then 1 file but less then 6, how can i specify this? i know i can use the multiple attribute, but that allows for more then 6, which could cause issues for me in the future.

This is what i have so far:

<input type="file" accept=".jpeg, .png, .jpg" multiple id="input-listing-img" />

Is there a way to specify allow x amount of files?

Answer

This can limit it on client-side, but you should always check again on server-side. Check this out for the server-side.

Note: I’m just using httpbin.org as an example, to see the files uploaded. You would change that to your PHP script that handles the files.

let container = document.querySelector('div#uploads-container');
let files_span = document.querySelector('div#uploads-container span#files');
let files = [];
const maximum = 6;

function getFileInputs()
{
  return container.querySelectorAll('input[type=file].input-listing-img');
}

function updateFiles()
{
  files_span.innerHTML = 'Files uploaded:';
  
  if (files.length > 0)
  {
    for (let i = 0; i < files.length; i++)
    {
      const file = files[i];
      
      files_span.innerHTML += '&nbsp;' + file.name;
      
      if (i + 1 < files.length)
      {
        files_span.innerHTML += ',';
      }
    }
  }
  else
  {
    files_span.innerHTML += '&nbsp;none';
  }
}

function addFileInput()
{
  updateFiles();
  
  if (getFileInputs().length < maximum)
  {
    let input = document.createElement('input');
    
    input.type   = 'file';
    input.accept = '.jpeg, .png, .jpg';
    input.classList.add('input-listing-img');
    
    container.appendChild(input);
    
    input.addEventListener('change', function(e)
    {
      const file = this.files[0];
      this.name = file.name;
      files.push(file);
      addFileInput();
    });
  }
}

addFileInput();
div#uploads-container
{
  border: solid 3px green;
  background: lightgreen;
  
  padding: 10px;
  margin-bottom: 10px;
}

div#uploads-container > input[type=file].input-listing-img
{
  display: block;
}
<form action="https://httpbin.org/anything" method="POST" enctype="multipart/form-data">
  <div id="uploads-container">
    <span id="files"></span>
    <hr>
  </div>
  <input type="submit" value="Submit" name="submit">
</form>