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 在后台將其發送到您的服務器。