javascript - 如何编辑上传到某个盒子的图片？

Question

像这样的 HTM:

<input type='file' multiple id="upload-file"/>
<?php
    for($i=0;$i<5; $i++) {

?>
    <div class="img-container" id="box<?php echo $i ?>">
        <button  style="display: none;" type="submit" class="btn btn-primary show-button">
            <i class="glyphicon glyphicon-edit"></i>
        </button>
    </div>
<?php
    }
?>

像这样的 Javascript:

$(function () {
    $(":file").change(function () {
        var noOfFiles = this.files.length;
        for(var i=0; i < noOfFiles; i++) {        
            var reader = new FileReader();
            reader.onload = imageIsLoaded;
            reader.readAsDataURL(this.files[i]);
        }        
    });
});

function imageIsLoaded(e) {
    var imgTmpl = '<img height="142" width="162" src='+e.target.result+'>';
    var IsImgAdded=false;
    $('.img-container').each(function(){
        if($(this).find('img').length==0 && IsImgAdded==false){
            $(this).append(imgTmpl);
            IsImgAdded=true;
            $(this).find('.show-button').show();
        }
    });     
};

$(".show-button").click(function(){
    $("#upload-file").click();
});

演示和完整代码如下:http://phpfiddle.org/main/code/1g8t-h5kn

我就是这样尝试的。但是不适合

当我在框 2 上编辑图像时，它会更改框 2 上的图像。而不是框 3

我该如何解决这个问题？

Answer 1

您需要创建一个 var 来设置实际编辑的容器，而不是在上传后启动函数，检查变量的值是否不同于 null 并将 img 附加到正确的位置。

在这里工作:https://codepen.io/VLK_STUDIO/pen/wdQPRL

$(function() {
  $(":file").change(function() {
    var noOfFiles = this.files.length;
    for (var i = 0; i < noOfFiles; i++) {
      var reader = new FileReader();
      reader.onload = imageIsLoaded;
      reader.readAsDataURL(this.files[i]);
    }
  });
});

var actualEdited = "";

function imageIsLoaded(e) {
  var imgTmpl = '<img height="142" width="162" src=' + e.target.result + ">";
  var IsImgAdded = false;
  $(".img-container").each(function() {
    if ($(this).find("img").length == 0 && IsImgAdded == false) {
      if (actualEdited == "") {
        $(this).append(imgTmpl);
        $(this).find(".show-button").show();
        IsImgAdded = true;
        return false;
      } else {
        $(actualEdited).find("img").remove();
        $(actualEdited).append(imgTmpl);
        $(actualEdited).find(".show-button").show();
        actualEdited = "";
        return false;
      }
    } else {
      if (actualEdited != "") {
        $(actualEdited).find("img").remove();
        $(actualEdited).append(imgTmpl);
        $(actualEdited).find(".show-button").show();
        actualEdited = "";
        return false;
      }
    }
  });
}

$(".show-button").click(function() {
  $("#upload-file").click();
  actualEdited = $(this).parent();
});

.img-container {
  width: 100px;
  border: 1px solid black;
  height: 100px;
  margin: 20px;
  display: inline-block;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

.show-button {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="upload-file" type="file">

<div class="img-container">
  <div class="show-button">click
  </div>
</div>
<div class="img-container">
  <div class="show-button">click
  </div>
</div>
<div class="img-container">
  <div class="show-button">click
  </div>
</div>
<div class="img-container">
  <div class="show-button">click
  </div>
</div>