jQuery功能可在上传之前对多个图像进行预览

priwebdev 发表于 Dev

priwebdev

我在页面中使用多个<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);
  });

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

我该如何解决？

罗里·麦克罗森（Rory McCrossan）

您只需要修改readURL功能即可遍历DOM，以查找.image_upload_preview与current相关的元素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')。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。