我在HTML文件中按程序生成了一个包含图像和输入文件的div。
所有元素的ID每次都改变1。这是div的一个例子，它以K作为数字，每次生成这个div时都递增，所以每个元素都有一个不同的ID。

<div>
  <img id="frame-add-K" src="" class="img-fluid" />
</div>
<label style="border: 2px solid black" for="img-input-K" class="btn">Select Image</label>
<input type="file" name="image_content_K" id="img-input-K" style="display:none; visibility:hidden;" accept="image/*" />

包含图像的div应该作为预览工作。所以当用户输入他的图像时，我想把img源代码更改为新更新的图像。
我已经尝试过使用jquery执行类似的操作：

$(document).ready(function() {
  $("input[id^=img-input-]").on("input", function() {
    var id_input = $(this).attr('id').substring('img-input-'.length); //get me only the number at the end
    $("#frame-add-" + id_input).attr("src", event.target.files[0]);
  });
});

但是id_input总是等于1，所以改变只影响我的第一个div，并且总是改变第一个图像源。而且“event.target.files[0]”在那里不起作用。
我理想地想使用jquery来做一个通用函数，它会得到元素的K值，并更新与此K值相关的图像src，但我愿意接受任何解决我问题的建议。