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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

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

您正在进行识别以识别已编辑的块。我警告你这不是最好的方法，但速度更快。将一个对象动作绑定到另一个是令人困惑和糟糕的练习，我建议你使用更好的js函数/闭包来获得你想要的正确形式。

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

2 个答案: