如何通过jquery展示图片预览？

Question

我有一个字段，这是上传图像图像，但问题是，这个字段有附加功能的帮助下添加行功能。我想要显示的图像预览选择在每个添加的行，所以，请告诉我如何才能做到这一点。查看页面-

​

jQuery(document).ready(function() {
  $("#append").click(function(e) {
    e.preventDefault();
    $(".inc").append('<div class="controls">\
            <input name="product_image[]" id="product_image" class="form-control" type="file">\
            <a href="#" style="margin-left: 50px; position:relative;left:575px;top:-31px;" class="remove_this btn btn-danger">Remove</a>\<div class="col-sm-10 col-sm-offset-2" style="margin-top: 10px;"><img src="" class="imgpre" id="imgPrev" style="width: 200px; height: 150px; border: 1px solid #ddd" ></div><br>\
            <br>\
            </div>');
    return false;
  });

  jQuery(document).on('click', '.remove_this', function() {
    jQuery(this).parent().remove();
    return false;
  });
  $("input[type=submit]").click(function(e) {
    e.preventDefault();
    $.map($(".inc :text"), function(el) {
      return el.value
    }).join(",\n")
  })
});

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label class="col-sm-2 control-label" for="parentId">Image</label>
  <div class="col-sm-6 inc">
    <input name="product_image[]" id="product_image" class="form-control" type="file"> <button style="margin-left: 50px; position:relative;left:575px;top:-31px;" class="btn btn-info" type="submit" id="append" name="append">
                    Add</button>
    <br>
    <br>
  </div>
  <div class="col-sm-10 col-sm-offset-2" style="margin-top: 10px;">
    <img src="" class="imgPrev" id="imgPrev" style="width: 200px; height: 150px; border: 1px solid #ddd">
  </div>
</div>

​

Answer 1

从你的代码开始(但经过修改，分离的CSS等)我想出了这个快速的解决方案：

​

$(document).on("change", "input.form-control", function() {
  readURL(this);
});

const readURL = input => {
  if (input.files && input.files[0]) {
    let reader = new FileReader();
    reader.onload = e => {
      $(input)
        .siblings("img")
        .attr("src", e.target.result);
    };
    reader.readAsDataURL(input.files[0]);
  }
};

$("#append")
  .click(() => {
    $(".form-group").append(`
			<div class="row">
				<input class="form-control" type="file">
				<br>
				<img src="" class="imgPrev">
				<button class="remove">Remove</button>
			</div>
		`);
  })
  .trigger("click");

$(document).on("click", "button.remove", function() {
  $(this).parent().remove();
  return false;
});

.btn-add {
  margin-left: 50px;
  position: relative;
  left: 200px;
}

.row {
  margin-bottom: 20px;
}

.row .imgPrev {
  width: 200px;
  height: 150px;
  border: 1px solid #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <button class="btn btn-add" id="append">Add</button>
</div>

​