Javascript 如何动态地将图像放置在框中？

我的html代码如下所示：

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

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

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

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

如果更改回调函数以接受附加参数，那么也许可以这样做

$(function () {
    $(":file").change(function () {
        var noOfFiles = this.files.length;
        for(var i=0; i < noOfFiles; i++) {        
            var reader = new FileReader();
            reader.onload = function(e){
                imageIsLoaded.call( this, e, i );
            };

            reader.readAsDataURL( this.files[i] );
        }        
    });
});

function imageIsLoaded(e,i) {/* where i is the value from the file count */
    var imgTmpl = '<img height="142" width="162" src='+e.target.result+'>';
    /* use second parameter to get the relevant box id */
    $('#box'+i).append(imgTmpl);
};

$（函数（）{
$（“：文件”）.change（函数（）{
var noOfFiles=this.files.length；
对于（var i=0；i

一个问题可能是，如果用户上传的图像超过5张（如果可能的话）
您可以像下面这样更改代码以使其正常工作：

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

函数图像已加载（e）{
var imgTmpl=''；
var-IsImgAdded=false；
$（'.img container'）。每个（函数（）{
if（$（this）.find（'img'）.length==0&&IsImgAdded==false）{
$（this）.append（imgTmpl）；
IsImgAdded=true；
}
});     
};
以下是对JS代码稍作修改的解决方案，
无论你有多少个盒子，它都会出现在每个盒子里

<script type="text/javascript">
    var box_no=0;
    $(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 box_id ='#box'+box_no+'';
        var imgTmpl = '<img height="142" width="162" src='+e.target.result+'>';
        $(box_id).append(imgTmpl);
        box_no++;
    };

</script>


var box_no=0；
$（函数（）{
$（“：文件”）.change（函数（）{
var noOfFiles=this.files.length；
对于（var i=0；i

Chee's
$（“#box0”）.append（imgTmpl）；这将始终在框1中附加图像，bcoz you box0是第一个框的id。它不适合。结果如下：。如果我选择2个图像，它将显示在框1和框2“我需要你的帮助”。看看这个：