javascript - 单独预览多个上传的图像

Question

我的表单中有三个图片上传字段。我正在尝试在上传之前预览图像。到目前为止，我一次只能预览一个。但我正在尝试同时预览所有这些。喜欢

我目前正在这样预览。

function previewImages() {

var $preview = $('#preview').empty();

if (this.files) $.each(this.files, readAndPreview);

function readAndPreview(i, file) {

if (!/\.(jpe?g|png|gif)$/i.test(file.name)){
  return alert(file.name +" is not an image");
} // else...

var reader = new FileReader();

$(reader).on("load", function() {
  $preview.append($("<img/>", {src:this.result, height:500}));
});

reader.readAsDataURL(file);

}

}

$('#file-input').on("change", previewImages);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
    <label>Image 2</label>
    <input id="file-input" type="file" multiple>
<div id="preview"></div>
</div>
<img id='img-upload'/>
</div>
<div class="form-group">
<label>Image 3</label>
<input id="file-input" type="file" multiple>
<div id="preview"></div>
</div>

Answer 1

您的代码中存在一些问题。

1. 从不使用重复的 id。这是您的代码仅适用于第一个输入类型文件的主要原因。您在所有输入上使用 id='file-input'。这不是正确的 HTML 明智。请改用类或其他 html 属性。

2. 您选择了预览容器，但只选择了第一个。 $preview = $('#preview').empty(); 通过编写 $('#preview')，jquery 找到第一个带有 id preview 的项目，选择它，清空它，然后忽略所有其他具有相同 id 的 div。这首先是因为您没有为更改的输入文件选择相应的 preview div(在您的 var 声明中它们之间没有连接)并且因为您再次使用重复(多个) id 在您的 HTML 结构中。这会产生很多“奇怪”的错误。

但即使您使用类而不是 id ( class='preview' ) 它也不会完全起作用，因为它只会选择第一个带有类预览的 div 并将所有预览附加到该分区

因此，要在输入和预览之间建立联系，请使用类似 var $preview = $(this).next('.preview').empty(); 的东西。这样你就知道 jQuery 将选择下一个具有更改输入的类预览的兄弟。

或者(如果您的 HTML 结构应该更改并且预览不完全在输入之后)您应该使用 $(this).siblings('.preview').empty()

您应该从这个答案中学到的最重要的事情是不要在页面上使用相同的 ID。当您有多个具有相应元素的项目时，相应地选择它们。

function previewImages() {
  const $preview = $(this).next('.preview').empty();

  if (this.files) $.each(this.files, readAndPreview);

  function readAndPreview(i, file) {

    if (!/\.(jpe?g|png|gif)$/i.test(file.name)) {
      return alert(file.name + " is not an image");
    } // else...

    const reader = new FileReader();

    $(reader).on("load", function() {
      $preview.append($("<img/>", {
        src: this.result,
        height: 100
      }));
    });

    reader.readAsDataURL(file);

  }

}

$('.file-input').on("change", previewImages);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label>Image 1</label>
  <input class="file-input" type="file" multiple>
  <div class="preview"></div>
</div>
<img class='img-upload' />
<div class="form-group">
  <label>Image 2</label>
  <input class="file-input" type="file" multiple>
  <div class="preview"></div>
</div>
<img class='img-upload' />
<div class="form-group">
  <label>Image 3</label>
  <input class="file-input" type="file" multiple>
  <div class="preview"></div>
</div>

边注。声明变量时，您应该使用 const 和/或 let 而不是 var。