计算 div 内的图像，然后添加 another/new img src（文件）

Question

我目前正在使用 Flask 进行后端编码，并且目前正在处理我的前端。下面是上传到服务器的图片。现在我需要编辑这些图片，就像我需要上传另一张图片或更改现有图片一样。我们在这个上使用 cropper.js，我不知道我将如何管理这个，因为我在前端脚本编写方面不太好，比如 javascript/jquery/ajax。最多可以上传 8 张图片，我需要计算现有图片的总数，然后添加另一个 img src 文件，例如，如果我有 3 张图片，那么我需要再显示 5 个 img src 文件以添加新图片。任何帮助都可以，我们将不胜感激。下面是我在 HTML 上使用 Jinja2 模板编写的代码。

<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 %}

Image for Edit Module on front-end

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();

});

计算 div 内的图像，然后添加 another/new img src（文件）

Count images inside a div, then add another/new img src (file)

html

javascript

jquery

frontend