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

您的代码中有一些问题。

从不使用重复的ID。这是您的代码仅适用于第一个输入类型文件的主要原因。您在所有输入上使用id='file-input'。这不是正确的HTML方法。改用类或其他html属性。
您选择预览容器，但仅选择第一个。 $preview = $('#preview').empty();，jquery通过编写$('#preview')，找到具有ID预览的第一个项目，选择它，将其清空，然后忽略具有相同ID的所有其他div。首先，这是因为您没有为更改的输入文件选择相应的preview div（在var声明中它们之间没有连接），并且再次在HTML结构中使用了重复的ID（多个）。这会产生很多“奇怪的”错误。

但是，即使您使用类而不是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。

Answer 2

var $preview=null;
function previewImages() {
 $preview = $(this).next('#preview').empty();
if (this.files) 
$.each(this.files,function(index,file){
   readAndPreview(index,file);
});
}
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:100}));
});
reader.readAsDataURL(file);
}

$('.file-input').on("change", previewImages);

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

尝试一下。 CSS ID对于页面是唯一的。如果要使用同一选择器访问多个元素，请使用类。

分别预览多个上传的图像

2 个答案: