いくつかのボックスにアップロードされた画像を編集するには？このような

Question

HTM：

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

デモと、このような完全なコード：：このような

<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をhttp://phpfiddle.org/main/code/1g8t-h5kn

私はそのようにしてみてください。私は箱2の上に画像を編集するときしかし、それは

に適合しない、それが3

どのように私はこの問題を解決することができます箱未ボックス2上の画像が変わりますでしょうか？

Answer 1

実際に編集されたコンテナを設定するには、アップロードをアップロードした後に関数を呼び出し、変数がnull以外の値を持っているかどうかを確認し、正しい場所にimgを追加する必要があります。 HERE

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

編集したブロックを特定することは忘れてしまいます。私はこれが最善のアプローチではないが、より速いアプローチであることを警告します。あるオブジェクトのアクションを別のアクションにバインドするのは混乱し、貧弱なプラクティスです。あなたが適切なフォームで必要なものを得るために、より良いjs関数/クロージャを使用するようお勧めします。