(HTML + JS Issue) Загрузить изображения из файла типа ввода в img

Question

У меня возникают некоторые проблемы при попытке загрузить более одного изображения (из файла типа ввода) в.

Я использую этот код для одного файла:

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#img')
                .attr('src', e.target.result);
        };

        reader.readAsDataURL(input.files[0]);
    }
}

В случае нескольких изображений у меня есть этот HTML:

<section class="image-group">
                    <label class="lb_form" for="txt_img">Foto: </label><br><br>
                    <div class="img">
                        <img id="img0">
                        <img id="img1">
                        <img id="img2">
                        <img id="img3">
                        <img id="img4">
                    </div><br>
                    <div class="upload-btn-wrapper">
                        <input type="button" value="Selecionar" class="frm-input btn"> 
                        <!--onchange="readURL(this)"-->
                        <input type="file" onchange="readURL(event)" id="files" name="txt_img" value="Selecionar" multiple> 
                    </div><br><br> 
                </section>

Каждое изображение должно быть в одном из # img.

Спасибо.

Answer 1

Вы можете сделать это:

function readURL(event) {
  let input = event.target;
  if (input.files) {
    Array.from(input.files).forEach((f, i) => {
      var reader = new FileReader();
      reader.onload = function(e) {
        $('#img' + i).attr('src', e.target.result);
      };
      reader.readAsDataURL(f);
    });
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="image-group">
      <label class="lb_form" for="txt_img">Foto: </label><br><br>
      <div class="img">
        <img id="img0">
        <img id="img1">
        <img id="img2">
        <img id="img3">
        <img id="img4">
      </div><br>
      <div class="upload-btn-wrapper">
        <input type="button" value="Selecionar" class="frm-input btn">
        <!--onchange="readURL(this)"-->
        <input type="file" onchange="readURL(event)" id="files" name="txt_img" value="Selecionar" multiple>
      </div><br><br>
    </section>