Javascript 如何编辑上传到some box上的图像？

像这样：

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

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

Javascript如下所示：

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

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

演示和完整代码如下：

我试着那样做。但它并不合适

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

我如何解决这个问题

$(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函数/闭包，以适当的形式获得所需的内容。

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

在这里演奏小提琴：

$function{ $：file.changefunction{ var noOfFiles=this.files.length； 对于变量i=0；i