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
Html Text Input Field With Currency Symbol
How to Make Div Have 100% Height of Parent, Independent of Children'S Size? Complex Layout
How to Display Image Encoded in Base64 Format in Angular 6
How to Use CSS to Show on Hover Tool-Tips Using the Same Text Which Is Shortend With Ellipses
Css Positioning Issues: Invalid Property Value
How to Create an HTML Button That Acts Like a Link
How to Disable Equal Height Columns in Flexbox
How to Reorder My Divs Using Only Css
Browsers Try to Download HTML File Instead of Opening
Placing Two Divs on Top of Each Other Without Using Position:Absolute
Selecting an Option in a Dropdown List Using Request Parameters
Zoom to Fit: Pdf Embedded in HTML
Woocommerce Change Product Image on Hover With CSS
Large File Upload Though HTML Form (More Than 2 Gb)