上传前用于多个图像预览的jQuery函数

Question

我在我的页面中使用了多个<input type="file">标记，其中class =“inputFile”如下所示

<div class="col-md-3">
  <form id="form2" runat="server">
    <input type='file' class="inputFile" />
    <img class="image_upload_preview" src="http://placehold.it/100x100" alt="your image" />
  </form>
</div>
<div class="col-md-3">
  <form id="form3" runat="server">
    <input type='file' class="inputFile" />
    <img class="image_upload_preview" src="http://placehold.it/100x100" alt="your image" />
  </form>
</div>

我想在选择图像时显示图像的预览，我正在使用jQuery函数。

  function readURL(input) {
    if (input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function(e) {
        $('.image_upload_preview').attr('src', e.target.result);
      }
      reader.readAsDataURL(input.files[0]);
    }
  }
  $(".inputFile").change(function() {
    readURL(this);
  });

此代码工作正常，但是当我为第一个标签选择图像时，它为两个字段选择相同的图像，如下所示：

我该如何解决这个问题？

Answer 1

您只需要修改readURL函数来遍历DOM，找到与当前.image_upload_preview相关的input元素。试试这个：

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            $(input).next('.image_upload_preview').attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
    }
}

$(".inputFile").change(function() {
    readURL(this);
});

请注意使用$(input).next('.image_upload_preview')。

Answer 2

您需要按如下方式定位关联的预览图片代码：

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        var upload_preview = $(input).closest("form").find(".image_upload_preview");
        reader.onload = function(e) {
            upload_preview.attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
    }
}
  $(".inputFile").change(function() {
    readURL(this);
  });