У меня есть веб-приложение, написанное на Node, js, где я хочу, чтобы пользователь мог отправлять свои изображения, если он сделал определенное количество снимков с помощью своих мобильных телефонов, например, 20 снимков (они не могут отправить больше или меньше). Я знаю, что могу собрать изображение в html, используя следующую строку, но не совсем понимаю, как обеспечить выполнение правила загрузки только в том случае, если пользователь использовал правило x изображений.

 <input type="file" accept="image/*" capture="user">
  

Простейшее решение

Вы можете получить количество файлов, выбранных во входных данных, просто из input.files.length .

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

Если вы не ES6 пользователь, ознакомьтесь с приведенным ниже фрагментом. Кроме того, ознакомьтесь с разделом дальнейшего чтения внизу этого ответа.

 const theInput = document.getElementById('theInput');
const theChooser = document.getElementById('theChooser');

let theNumber; //Or "let theNumber = your-default-number" if you want to avoid possible error when user selected 0 files

theChooser.oninput = () => {
  theNumber = theChooser.value * 1 //Multiplying it to 1 will make the (already number) input a number anyways
}

theInput.onchange = () => {
  theInput.files.length === theNumber ? theFunction() : theWarning()
  // To do nothing when user selected 0 files (user clicked Cancel) do this
  /*
  theInput.files.length === theNumber ? theFunction() : theInput.files.length === 0 ? null : theWarning()
  */
}

function theFunction() {
  console.log(`You chose exactly ${theNumber} files. Yay!`);
}

function theWarning() {
  console.log(`¯\_(ツ)_/¯ Watcha doing, you told to choose only ${theNumber} files.`);
}  

 <input type="number" id="theChooser" placeholder="Set your number of files">
<br>
<input type="file" id="theInput" multiple>  

Не знаком с ES6, посмотрите этот фрагмент. Сравнение обоих фрагментов поможет вам ознакомиться с ES6.

 const theInput = document.getElementById('theInput');
const theChooser = document.getElementById('theChooser');

let theNumber; //Or "let theNumber = your-default-number" if you want to avoid possible errors when user selected 0 files

theChooser.addEventListener('input', function() {
  theNumber = theChooser.value * 1; //Multiplying it to 1 will make the (already number) input a number anyways
})

theInput.addEventListener('change', function() {
  if (theInput.files.length === theNumber) {
    theFunction();
  } else {
    theWarning();
  }
  // To do nothing when user selected 0 files (user clicked Cancel) do this
  /*
  if (theInput.files.length === theNumber) {
    theFunction();
  } else if (theInput.files.length === 0) {
  } else {
    theWarning();
  }
  */
})

function theFunction() {
  console.log("You chose exactly "   theNumber   " files. Yay!");
}

function theWarning() {
  console.log("¯\_(ツ)_/¯ Watcha doing, you told to choose only "   theNumber   " files.");
}  

 <input type="number" id="theChooser" placeholder="Set your number of files">
<br>
<input type="file" id="theInput" multiple>  

Дальнейшее чтение

• тип ввода =»file» в MDN
• прослушиватель событий ввода в MDN
• изменить прослушиватель событий в MDN

Чтобы разрешить загрузку нескольких файлов, вам придется включить multiple атрибут в input тег.

 <input type="file" accept="image/*" capture="user" multiple="true" id="file-inp" />
  

Вы должны проверить количество файлов, загруженных на клиент, и предупредить пользователя в случае неправильного действия.

 $('#file-inp').change(function() {
    var files = $(this)[0].files;
    if(files.length != 20){
        alert("only a total of 20 files should be uploaded");
    }
    //enter code here
});
  

Вы можете ссылаться на образец как, вам нужно использовать ключевое слово ‘multiple’ в HTML как,

 <input type="file" name="userPhoto" multiple />
  

ИМХО, Multer — один из хороших пакетов npm для обработки загрузки файлов.
Вы можете настроить нет. файлов, которые вы хотите разрешить загружать

  var upload = multer({ storage : storage }).array('userPhoto',20);
  

Пример узла.JS code

 var bodyParser = require("body-parser");
var multer = require('multer');
var app = express();

app.use(bodyParser.json());

var storage = multer.diskStorage({
  destination: function (req, file, callback) {
    callback(null, './uploads');
  },
  filename: function (req, file, callback) {
    callback(null, file.fieldname   '-'   Date.now());
  }
});

var upload = multer({ storage : storage }).array('userPhoto',20); // here you can set file limit to upload

app.get('/',function(req,res){
      res.sendFile(__dirname   "/index.html");
});

app.post('/api/photo',function(req,res){
    upload(req,res,function(err) {
        //console.log(req.body);
        //console.log(req.files);
        if(err) {
            return res.end("Error uploading file.");
        }
        res.end("File is uploaded");
    });
});

app.listen(3000,function(){
    console.log("Working on port 3000");
});