Блог

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

Вам необходимо использовать несколько атрибутов во входном теге файла типа <input id="files" type="file" multiple>
Это решает только половину проблемы, так как множественное число позволяет использовать любое количество файлов.

Вы можете решить эту проблему, используя следующие способы:

• Предоставьте пользователю информацию о том, что разрешено использовать только 2 файла.
• Иногда пользователь может выбрать более 2 файлов даже после получения информации, в этом случае используйте javascript, чтобы сообщить об ошибке

 <div class="wrapper">
  <label for="files">Upload Images
    <span>Maximum of only 2 files allowed
    </span>
  </label>
  <input type="file" id="files" multiple>
  <div id="error" class="error">
    Maximum of 2 files only can be uploaded
  </div>
</div>
<style>
.wrapper {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.wrapper label {
  color: blue;
}
label > span {
  display: block;
  font-size: 10px;
}
.error {
   color: red;
   font-size: 20px;
   display: none;
 }
</style>

<script>
 files.addEventListener('change', (e) => {
  if(e.target.files.length > 2) {
    error.style.display = "block"
  } else {
    error.style.display = "none"
  }
})
</script>
 

Вот ссылка на кодовый файл https://codepen.io/shivakumarjakkani/pen/vYmXVxy

вы можете использовать несколько элементов, например:

   <input type="file" id="files" name="files" multiple><br><br>