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

HTM like this :

<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 like this :

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

Demo and full code like this : http://phpfiddle.org/main/code/1g8t-h5kn

I try like that. But it does not fit

Should when I edit image on the box 2, it will change image on the box 2. Not box 3

How can I solve this issue?

You need to create a var to set the actual edited container than after the upload launch the function, check if the variable has a value different than null and append the img in the right place.

WORKING FIDDLE HERE: 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>

</div>

$(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();
        } else {
           if ($(this).id == sessionStorage.getItem('blockid')){
            $(this).append(imgTmpl);
            IsImgAdded=true;
            $(this).find('.show-button').show();
           }
        }
    });     
};

$(".show-button").click(function(){
    sessionStorage.setItem('blockid', $(this).id);
    $("#upload-file").click();
});

You're forggeting to identify the edited blocks. I warn you this is not the best approach, but the faster one. Bind one object action to another is confusing and poor practice, i advise you to use better js functions/closures to get what you want with proper form.