javascript - 上传图片后如何在图片框中添加图标删除？

Question

我的 html 代码是这样的:

<input type='file' multiple/>
<?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-danger show-button">
            <i class="glyphicon glyphicon-trash"></i>
        </button>
    </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+'>';
    var IsImgAdded=false;
    $('.img-container').each(function(){
        if($(this).find('img').length==0 && IsImgAdded==false){
            $(this).append(imgTmpl);
            IsImgAdded=true;
            document.getElementsByClassName('show-button')[0].style.display = 'block';
        }
    });     
};

演示和完整代码如下:http://phpfiddle.org/main/code/gnfa-gf8h

每次上传图片时，我都想在每张上传的图片中添加删除图标。例如我选择了2张图片，那么每2张图片都会有删除图标

我试过了。但它只适用于框 1。否则删除图标不会出现在图像中。这似乎需要更多关于 css 的专业知识。我不擅长CSS

希望你能帮帮我

Answer 1

问题出在这一行

document.getElementsByClassName('show-button')[0].style.display = 'block';

这将找到第一个 .show-button 并显示它。要定位具有图像的 .img-container 中的每个 .show-button，请将该行更改为 $(this).find('.show-按钮').show();

这是更新后的函数

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

要将删除图标定位在图像上，请使用绝对定位。

.img-container { position: relative; }
.img-container .show-button { position: absolute; top: 0; left: 0; }