計算div中的圖像，然后添加另一個/新的img src（文件）

Question

我目前正在使用Flask進行后端編碼，並且目前為止在前端上工作。 以下是服務器上上傳的圖像。 現在，我需要編輯這些圖像，就像我需要上傳其他圖像或更改現有圖像一樣。 我們在此代碼上使用了cropper.js，但我不知道該如何管理它，因為在涉及JavaScript / jquery / ajax之類的前端腳本方面，我表現不佳。 最多可以上傳8張圖像，我需要計算現有圖像總數，然后添加另一個img src文件，例如，如果我有3張圖像，則需要再顯示5張img src文件以添加新圖像。 任何幫助都會做，將不勝感激。 下面是我的帶有Jinja2模板的HTML代碼。

<div class="col-xs-3">
          <label class="rs-thumb rs-thumb-cover">
            <div class="rs-thumb-content" id="inputImage1-wrap"><img src="{{ resource.image_url }}" alt="" id="inputImage1-pic" width="100%"><i class="fa fa-picture-o"></i>
              <span class="rs-cover">Cover</span>

            </div>
          </label>
        </div>

        {% for imgs in resource.images[1:] %}
        <div class="col-xs-3">
          <label class="rs-thumb rs-thumb-cover">
            <div class="rs-thumb-content" id="inputImage1-wrap"><img src="{{ imgs.image }}" alt="" id="inputImage1-pic" width="100%"><i class="fa fa-picture-o"></i>
              <!-- <span class="rs-cover">Cover</span> -->

            </div>
          </label>
        </div>
        {% endfor %}

前端編輯模塊的圖像

Answer 1

HTML + JQuery解決方案，經過大多數測試，因此應該可以工作。

HTML

<div class="imgBox">
<!-- Your content will appear here -->
</div>

JQuery的

// Get the amount of images on the current page
var amountOfImg = $("img").length;
var amountToCount = 8;

for (var i = 0; i < amountToCount - amountOfImg; i++) {
 $(".imgBox").append("<input type='file' name='fileInput' /> <b id='removeImg'>Remove</b>")

}

$("#removeImg").click(function() {
  // When the user clicks on the #removeImg text, find the closest "img" element and remove it.
  $(this).closest("img").remove();

});