ограничение количества файлов при вводе файла html5 (js) и нескольких полей на одной странице - PullRequest
Новая
       0

ограничение количества файлов при вводе файла html5 (js) и нескольких полей на одной странице

0 голосов
/ 26 марта 2020

Здравствуйте, я пытаюсь найти хорошее решение для ограничения количества файлов при вводе файла. Моя проблема в том, что мне нужно найти универсальное c решение, потому что html - это поколение dynmai c, и у меня есть несколько входов на одной странице. (и я хочу другое поле предела равноправия) 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">

мне нужно добавить поле равноправия функции предела, например, первые 2 и вторые 10, моя идея - вдохновить на { ссылка } добавив max-uploads = 6 к моему html и загрузив. 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;
                       }
                   });
           });
           });

ошибка 

Uncaught TypeError: Cannot read property 'length' of undefined

спасибо за любую помощь

1 Ответ

0 голосов
/ 30 марта 2020

Может быть, это отвечает на ваш вопрос: https://www.tutorialspoint.com/How-to-limit-maximum-items-on-multiple-input-input-type-file-multiple

Вот небольшой рабочий фрагмент, сгенерированный вдоль этих строк. Я беру максимально допустимое количество файлов из атрибута data-max каждого отдельного элемента ввода.

Редактировать: Теперь я запускаю проверку количества файлов по событию change каждый файл ввода (я использую «делегированное связывание», т.е. слушатель присоединен к родительскому элементу <form>). В зависимости от того, превышено ли максимальное число, я отключаю кнопку отправки. 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...