Question

我目前正在使用Flask进行后端编码，目前正在使用我的前端。以下是在服务器上上传的图像。现在我需要编辑这些图像，就像我需要上传其他图像或更改现有图像一样。我们在这个上使用了cropper.js，而且我不知道如何管理这个，因为当涉及到javascript / jquery等前端脚本时我不是那么好阿贾克斯。最大图像可以上传最多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 %}

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中的图像，然后添加另一个/新的img src（文件）

1 个答案: