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 并将所有预览附加到该 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。