javascript - 如何动态地将图像放入框中？

Question

我的 html 代码是这样的:

<input type='file' multiple/>
<br>

<?php
    for($i=0;$i<5; $i++) {

?>
    <div class="img-container" id="box<?php echo $i ?>">

    </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+'>';
    $('#box0').append(imgTmpl);
};

演示和完整代码如下:http://phpfiddle.org/main/code/85ip-hua2

我有5个盒子

当用户上传图片时，图片会出现在框中

例如如果用户上传2张图片，那么2张图片将出现在第一个框和第二个框

我已经编写了代码。但是我的代码只能在第一个框中放一张图片

我在循环时遇到了问题

我该如何解决我的问题？

Answer 1

您可以像下面这样更改代码以使其工作:

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