javascript - 将图像从输入类型文件加载到 img

Question

我在尝试将多个图像(从输入类型文件)加载到 <img> 时遇到了一些麻烦.

我正在为一个文件使用此代码:

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>