SELECT 图片来自上传前的预览

Question

我正在尝试制作 javascript function 以让人们 select 在选择他们的图像之后和上传之前成为主图像。 我正在使用 Christian Bayer 的图像上传器 JS 图书馆。 它提供了几个选项，例如我可以预览图像，我可以删除它们等等。这也意味着我的 html 部分只有这个：

<div class="input-images" name="thumbnailimage"></div>

所以我真的不能在这里使用 onclick 事件或任何东西。 我正在尝试通过将每个预览图像添加 onclick 事件来 select 图像，并且我想将其路径放入隐藏输入中，因此我可以将其上传到不同的表。 这是添加图像后我的 div 的样子：

<div class="uploaded">
<div class="uploaded-image" data-index="0" id="image-0">
<img src="blob:http://localhost/11388451-d0be-454c-aabe-20a77e8c8835">
<button class="delete-image"><i class="iui-close"></i></button>
</div>
<div class="uploaded-image" data-index="1" id="image-1">
<img src="blob:http://localhost/5920bf98-8b23-4bb2-b573-20fe94620437">
<button class="delete-image"><i class="iui-close"></i></button>
</div>
</div>

我正在尝试以这种方式获取图像：

$('#image-upload').change(function() {
  if ($(this).val().length) {
  var foo = document.getElementsByClassName('uploaded-image');
  console.log(foo);
  } else {
    foo = "";
    }
});

但是如何将 onclick 事件添加到每个图像到 select 并能够将其复制到隐藏输入？

Answer 1

请查看以下示例：

https://jsfiddle.net/Twisty/mbvqoyn4/14/

JavaScript

$(function() {
  var selected = [];
  $('.input-images-1').imageUploader();

  $(".uploaded").on("dblclick", "img", function() {
    console.log("Double Click on Image", $(this).attr("src"));
    selected.push({
      id: $(this).parent().data("index"),
      src: $(this).attr("src")
    });
    $(this).parent().addClass("selected-image");
    console.log(selected);
  });
});

我将事件移动到双击，因为已经有一个 Click 事件分配给正在冒泡的图像的父级：

function(e) {
  d(e)
}

但是您可以看到如何使用.on()方法将事件绑定到动态创建的 object。 然后我将它们存储在一个数组中，然后您可以将此数据发送到隐藏字段或使用 AJAX 在后台将其发送到您的服务器。