上传前预览多张图片的 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，找到与当前 input 相关的 .image_upload_preview 元素。试试这个:

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')的使用。