限制文件输入html5（js）和同一页面内的多字段中的文件数

Question

hello i try to find a good solution to limit number of file in file input my problem is i need too find a generic solution because html is dynmaic generation and i have multi input in same page (and i want different limit peer field) html code previwe你好，我试图找到一个好的解决方案来限制文件输入中的文件数量我的问题是我也需要找到一个通用的解决方案，因为 html 是动态生成的，我在同一页面中有多个输入（我想要不同的限制对等字段）html 代码预览

<input type="file" name="micker[file_upload2][]" accept=".pdf" id="fileupload2" placeholder="Upload field2 mulitple" aria-label="Upload field2 mulitple" class="inputfile required invalid" multiple="" style="margin:0" maxuploads="2" aria-required="true" required="required" aria-invalid="true">

i need to add limit function peer field like first 2 and second 10 my idea is to inspire to https://stackoverflow.com/a/15855085/2822359 adding max-uploads = 6 to my html and upload.js我需要添加限制功能对等字段，如第一个 2 和第二个 10 我的想法是激发https://stackoverflow.com/a/15855085/2822359将max-uploads = 6添加到我的 html 和 upload.js

jQuery(document).ready(function ($) {
           $("body").change(function () {
               var numFiles = $("input",this)[0].files.length;
               var maxuploads = $("input",this)[0].attr(\'data-maxuploads\').toString();
               alert(numFiles);
               if (numFiles > maxuploads ) {
                   alert(\'Your Message\');
                   }else {
                   maxuploads = maxuploads + 1;
                       }
                   });
           });
           });

the error错误

Uncaught TypeError: Cannot read property 'length' of undefined

thanks for any help谢谢你的帮助

Answer 1

Maybe this answers your question: https://www.tutorialspoint.com/How-to-limit-maximum-items-on-multiple-input-input-type-file-multiple也许这可以回答您的问题： 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.我从每个输入元素的data-max属性中获取最大允许的文件数。

Edit: I now trigger the file-count-check by the change event of each file input (I use "delegated binding", ie the listener is attached to the parent <form> element).编辑：我现在通过每个文件输入的change事件触发文件计数检查（我使用“委托绑定”，即侦听器附加到父<form>元素）。 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>

限制文件输入html5（js）和同一页面内的多字段中的文件数

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-03-30 14:50:56

限制文件输入html5（js）和同一页面内的多字段中的文件数

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-03-30 14:50:56

解决方案1
0 已采纳 2020-03-30 14:50:56