Wie bearbeite ich das Bild, das auf die Box geladen wurde?

Question

HTM wie folgt aus:

<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 wie folgt aus:

$(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 und Voll Code wie folgt: http://phpfiddle.org/main/code/1g8t-h5kn

Ich versuche, dass dergleichen. Aber sie paßt nicht

Sollte, wenn ich Bild bearbeiten auf dem Feld 2, wird es Bild auf dem Feld ändert 2. Box nicht 3

Wie kann ich dieses Problem lösen?

Answer 1

Sie müssen eine Variable erstellen, um den tatsächlich bearbeiteten Container festzulegen, als nach dem Upload die Funktion starten, prüfen, ob die Variable einen anderen Wert als null hat, und das img an der richtigen Stelle anhängen.

ARBEITS FIDDLE HIER: 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>

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

Sie können die bearbeiteten Blöcke identifizieren. Ich warne Sie, das ist nicht der beste Ansatz, aber der schnellere. Eine Objektaktion an eine andere zu binden ist verwirrend und schlechte Praxis, ich rate Ihnen, bessere js Funktionen/Verschlüsse zu verwenden, um zu bekommen, was Sie mit der richtigen Form wollen.