Как я могу выбрать несколько изображений, используя событие изменения?

Question

Как я могу выбрать несколько картинок. Прямо сейчас я могу получить фотографии сингл-сингл, но я хочу получить несколько. как я могу это сделать?

Что я пробовал: -

 $(function() {
                $(document).on('change', '.caFileBtn', function() {
                    console.log(imagePath);
                    var files = this.files
                    for (var i = 0; i < files.length; i++) {
                        var file = files[i];
                        var imagePath = URL.createObjectURL(file);
                    }
                    var imageElement = `
    <div>
    <img src="${imagePath}" />
    </div>
`;
                    $('.ca-photos-area').show();
                    $('.ca-photos-area').prepend(imageElement);

                    $(this).val('');
                });

            });

  .ca-photos-area {
            display: flex;
        }
        
        .ca-photos-area img {
            width: 90px;
            height: 90px;
            margin: 5px;
            border: 1px solid #ccc;
        }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 
    <div class="btn btn-primary btn-block">
            <input type="file" Multiple="Multiple" class="caFileBtn" />
            <i class="fas fa-image"></i>
        </div>

        <div class="col-md-12">
            <div class="ca-photos-area mt-3">
            </div>
        </div>

Ответ будет оценен

Answer 1

Хотя теги и атрибуты html не чувствительны к регистру, рекомендуется использовать строчные буквы. Хотя значения атрибутов чувствительны к регистру. Таким образом, вы должны определить multiple в нижнем регистре:

<input type="file" multiple="multiple" class="caFileBtn" />
<!-- Must be in lowercase --- ^^ -->
<!-- Otherwise, it's still single type -->

Или вы также можете задать только определенный атрибут:

<input type="file" multiple class="caFileBtn" />

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

Вот рабочий код javascript, который будет выбирать все выбранные изображения:

$(function() {
  $(document).on('change', '.caFileBtn', function() {
        console.log(imagePath);
        var files = this.files
        var imageElement = [];
        for (var i = 0; i < files.length; i++) {
           var file = files[i];
           var imagePath = URL.createObjectURL(file);
           imageElement.push( `
            <div>
              <img src="${imagePath}" />
            </div>`);
        }   
       for (var i=0; i<imageElement.length; i++){
         $('.ca-photos-area').prepend(imageElement[i]);
       }
       $('.ca-photos-area').show();
       $(this).val('');
  });
});

Answer 2

Issue

Большинство операторов в обработчике были вне for l oop. Кстати, я удалил оператор сброса: $(this).val(''), потому что тег всегда будет отображать: "файлы не выбраны ..." , были ли файлы выбраны или нет. Без сброса вы получите список выбранных имен файлов.

Демо

$('.caFileBtn').on('change', function() {

  const self = $(this)[0];
  const files = self.files;
  let imagePath, imageTag;

  for (let i = 0; i < files.length; i++) {
    let file = files[i];
    imagePath = URL.createObjectURL(file);
    imageTag = `<figure><img src="${imagePath}"></figure>`;
    $('.ca-photos-area').prepend(imageTag);
  }
});

.ca-photos-area {
  display: flex;
}

.ca-photos-area img {
  width: 90px;
  height: 90px;
  margin: 5px;
  border: 1px solid #ccc;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" rel="stylesheet" crossorigin="anonymous">

<label class="btn btn-primary btn-block">
  <input class="caFileBtn" type="file" multiple="multiple">
  <i class="fas fa-image"></i>
</label>

<section class="col-md-12">
  <article class="ca-photos-area mt-3"></article>
</section>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>