How to limit the maximum files chosen when using multiple file input

Question

When using  lt input type  file  multiple gt  it s possible for the user to choose multiple files   How does ones sets a limit for how many files can be chosen  for instance two

User · Answer

On change of the input track how many files are selected:

_x000D_

$("#image").on("change", function() {_x000D_
    if ($("#image")[0].files.length > 2) {_x000D_
        alert("You can select only 2 images");_x000D_
    } else {_x000D_
        $("#imageUploadForm").submit();_x000D_
    }_x000D_
});

_x000D_

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<strong>On change of the input track how many files are selected:</strong>_x000D_
<input name="image[]" id="image" type="file"  multiple="multiple" accept="image/jpg, image/jpeg" >

_x000D_

User · Answer

if you want php you can count the array and just make an if statement like  if  int count   FILES  i dont know whats coming next    gt  2        echo  error message

User · Answer

You should also consider using libraries to do that  they allow limiting and much more    FineUploader  Demo using validation itemLimit as of 5 16 2   var restrictedUploader   new qq FineUploader       validation            itemLimit  3               bluimp s jQuery File Upload Plugin  Usage  jquery file upload restricting number of files using maxNumberOfFiles as of v9 22 0       fileuploadbasic   fileupload     maxNumberOfFiles  6        They are also available at https   cdnjs com

User · Answer

In javascript you can do something like this  lt input   ref  quot fileInput quot    multiple   type  quot file quot    style  quot display  none quot     change  quot trySubmitFile quot   gt   and the function can be something like this  trySubmitFile e      if  this disabled  return    const files   e target files    e dataTransfer files    if  files length  gt  5        alert  You are only allowed to upload a maximum of 2 files at a time          if   files length  return    for  let i   0  i  lt  Math min files length  2   i          this fileCallback files i           I am also searching for a solution where this can be limited at the time of selecting files but until now I could not find anything like that

User · Answer

Use two  lt input type file gt  elements instead  without the multiple attribute

User · Answer

Another possible solution with JS  function onSelect e        if  e files length  gt  5            alert  Only 5 files accepted             e preventDefault

User · Answer

This should work and protect your form from being submitted if the number of files is greater then max file number     function        var    Define maximum number of files        max file number   3           Define your form id or class or just tag         form      form              Define your upload field class or id or tag         file upload       image upload    form             Define your submit class or id or tag         button       submit    form          Disable submit button on page ready     button prop  disabled    disabled        file upload on  change   function          var number of images     this  0  files length      if  number of images  gt  max file number          alert  You can upload maximum   max file number  files             this  val             button prop  disabled    disabled          else          button prop  disabled   false

User · Answer

You could run some jQuery client-side validation to check     function           input type  submit     click function            var  fileUpload      input type  file              if  parseInt  fileUpload get 0  files length  gt 2            alert  You can only upload a maximum of 2 files                                 http   jsfiddle net Curt u4NuH   But remember to check on the server side too as client-side validation can be bypassed quite easily

[html] How to limit the maximum files chosen when using multiple file input

Examples related to html

Examples related to file