How to Limit the Maximum Files Chosen When Using Multiple File Input

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

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

limit number of file in file input html5 (js) and multi field inside same page

Maybe this answers your question: https://www.tutorialspoint.com/How-to-limit-maximum-items-on-multiple-input-input-type-file-multiple

Here is a little working snippet generated along those lines. I take the maximum allowed numbers of files from the data-max attribute of each individual input element.

Edit:
I now trigger the file-count-check by the change event of each file input (I use "delegated binding", i. e. the listener is attached to the parent <form> element). Depending on whether the maximum number is exceeded I disable the submit-button.

const btn=document.querySelector('input[type=submit]');document.querySelector('form').addEventListener('change',function(ev){ if(ev.target.type=='file'){  // I collect the inps here to allow for dynamic pages (varying number of inputs):  const inps=[...document.querySelectorAll('input[type=file]')];  btn.disabled=inps.some(inp=>{ // check whether the condition has been violated at least once    if (inp.files.length>inp.dataset.max){ // show warning for first violation      console.log(`You are only allowed to upload a maximum of ${inp.dataset.max} files for ${inp.name}!`);      return true;    }  }) }});
<html>   <head>      <title>HTML file upload</title>   </head>   <body>      <form>         <input type="file" name="files1[]" accept=".pdf" multiple data-max="2"><br/>         <input type="file" name="files2[]" accept=".pdf" multiple data-max="3"><br/><br/>         Upload multiple files, and click Submit.<br>         <input type="submit" value = "submit">      </form>   </body></html>

How to set a maximum amount of file selections when a user is uploading files via an input on a view

Use Jquery:

$(function(){
$("input[type='submit']").click(function(){
var $fileUpload = $("input[type='file']");
if (parseInt($fileUpload.get(0).files.length)>2){
alert("You can only upload a maximum of 2 files");
}
});
});​

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

How can restrict user to upload max 10 files at once?

<input id="files" type="file" name="files[]" multiple="multiple" onchange="checkFiles(this.files)">

function checkFiles(files) {
if(files.length>10) {
alert("length exceeded; files have been truncated");

let list = new DataTransfer;
for(let i=0; i<10; i++)
list.items.add(files[i])

document.getElementById('files').files = list.files
}
}

This function will not allow to select files more than 10.

File input problems - Limit number of selected files

1 You could use javascript to detect the number of files selected, and give a warning if it's more than 10

$('fileinput').onchange=function(){if(this.files.length>10)alert('to many files')}
//prevent submitting if to many
$('form').onsubmit=function(){if(this.files.length>10)return false;}

you could even check if the combined filesize isn't to big by adding up all .files[i].fileSize

2 see: http://php.net/manual/en/features.file-upload.multiple.php
(short version; use: $_FILES['userfile']['name'][0], $_FILES['userfile']['tmp_name'][0], $_FILES['userfile']['size'][0], and $_FILES['userfile']['type'][0])



Related Topics



Leave a reply



Submit