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张图片

我已经制作了代码。但是我的代码只能在第一个框中放入1个图像

我无法进行循环

如何解决我的问题？

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

Answer 2

以下是您的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>

欢呼的

Answer 3

如果您更改回调函数以接受其他参数，那么也许您可以执行此操作

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

如果用户上传了超过5张图片（如果可能的话），则可能存在一个问题

如何动态地将图像放在一个盒子里？

3 个答案: