javascript - 如何删除任意框中上传的图片？

Question

我的代码很长。我不能在这里展示给大家。我只显示javascript代码

我的 javascript 是这样的:

<script type="text/javascript">
    let current = 0;
     for(let i = 0; i < 5; i++) {   
        $('#thumbnail-view-delete-'+i).click(function(){
            current -= 1;
            $('input[name="photo-'+i+'"]').val('');
            document.getElementById("thumbnail-view-li-"+current).style.display = "none";
            document.getElementById("thumbnail-upload-li-"+current).style.display = "";
            document.getElementById("thumbnail-upload-li-"+(current+1)).style.display = "none";
            document.getElementById("thumbnail-slot-li-"+(current+1)).style.display = "";
        });
    }

    var editClicked = false;
    for(let i = 0; i < 5; i++) {   
        $('#thumbnail-view-edit-'+i).click(function(){
            editClicked = true;
            $('input[name="photo-'+i+'"]').click();
        });
    }

    for(let i = 0; i < 5; i++) {   
        $('#thumbnail-view-add-'+i).click(function(){
            editClicked = false;
            $('input[name="photo-'+i+'"]').click();
        });
    }

    for(let i = 0; i < 5; i++) {   
        var reader = new FileReader();     
        $('input[name="photo-'+i+'"]').change(function (e) {
            let indexPhoto = i;
            current += 1;
            reader.onload = function(){
                imageProducIsLoaded(indexPhoto);
            };
            reader.readAsDataURL(e.target.files[0]);
        });
    }

    function imageProducIsLoaded(indexPhoto) {
        $('#thumbnail-view-'+indexPhoto).attr('src', reader.result);
        if (!editClicked) {
            document.getElementById("thumbnail-upload-li-"+indexPhoto).style.display = "none";
            document.getElementById("thumbnail-view-li-"+indexPhoto).style.display = "";
            if((indexPhoto+1) < 5) {
                document.getElementById("thumbnail-upload-li-"+(indexPhoto+1)).style.display = "";
                document.getElementById("thumbnail-slot-li-"+(indexPhoto+1)).style.display = "none";
            }
        }
    };
</script>

你可以在这里看到我的完整代码和演示:http://www.phpfiddle.org/main/code/adjv-sfuy

我使用 show hide 添加、删除和编辑图像。如果您查看演示，它会起作用。图片可以编辑、删除和添加

但我的问题是当用户删除图片时

当用户删除图像时，最后一个框上的图像将被删除。应该是当用户删除一张图片，然后我点击它的删除按钮的图片就被删除了

例如我输入了5张图片。删除图片到3时，图片到3删除

这几天一直在尝试修改代码，但一直没有找到解决办法

有没有人可以帮助我？

Answer 1

使用 jquery 功能可以非常简单地完成复杂的事情。

<?php
if(isset($_POST['submit'])) {
    echo "<pre>";
    print_r($_FILES);
    for($i=0;$i<count($_FILES);$i++) {

        if($_FILES['photo-'.$i]['error'] == 0) {
            $file_name = $_FILES['photo-'.$i]['name'];
            $file_tmp =$_FILES['photo-'.$i]['tmp_name'];
            move_uploaded_file($file_tmp,"img/".$file_name);
        }
    }
    echo "</pre>";
}
?>
<style type="text/css">
.img-container{width:162px;height:142px;border:1px dashed #337ab7;float:left;margin-right:5px;position:relative;border-radius:5px}
.upload-add-product{position:absolute;display:block;margin:34% 42%}
.upload-add-product i{font-size:30px}
.img-container ul{list-style:none;bottom:0;position:absolute;width:100%;padding:0;margin:0;background-color:rgba(255,255,255,0.7)}
.img-container ul li{display:inline;padding:0;display:table-cell;width:1%;text-align:center;position:relative;padding:2px 0}
.img-container ul li:hover{background-color:#eee}
.img-container ul li a{color:red}
</style>

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<form method="post" enctype="multipart/form-data">

<div class="images-area">
<?php
    for($i=0;$i<5; $i++) { ?>
    <div class="img-container" id="box<?php echo $i ?>" data-status="0" data-index="<?=$i?>">
        <input type='file' name="photo-<?=$i?>" style="visibility: hidden;position:absolute;" id="upload-file<?=$i?>" class="upload-file"/>
        <div class="image">
            <?php if ($i == 0): ?>
                <a href="javascript:;" class="btn-click upload-add-product" onclick="$('#upload-file<?=$i?>').click()"><i class="fa fa-plus"></i></a>
            <?php endif; ?>
        </div>
    </div>

<?php } ?>
</div>
<input type="submit" name="submit" value="submit">
</form>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    $(document).on('change',".upload-file",function () {
        var $input = $(this);
        var inputFiles = this.files;
        if(inputFiles == undefined || inputFiles.length == 0) return;
        var inputFile = inputFiles[0];
        var i = parseInt($(this).closest('.img-container').attr('data-index'));
        var reader = new FileReader();
        reader.onload = function(event) {
            // console.log($('#box'+i).find('img').length);
            if($('#box'+i).find('img').length) {
                $('#box'+i).find('img').attr('src',event.target.result);
            } else {
                var imgTmpl ='<img height="142" width="162" src='+event.target.result+'>'+
                           '<ul><li class="btn-click"  onclick=\'$("#upload-file'+i+'").click()\'><a href="javascript:;"><i class="fa fa-pencil"></i></a></li>'+
                           '<li class="delete-button"><a href="javascript:;"><i class="fa fa-trash"></i></a></li></ul>';
                $('#box'+i+' .image').html('');
                $('#box'+i+' .image').append(imgTmpl);
                $('#box'+i).attr('data-status',1);

                $('#box'+(i+1)+' .image').html('<a href="javascript:;" class="btn-click upload-add-product" onclick=\'$("#upload-file'+(i+1)+'").click()\'><i class="fa fa-plus"></i></a>');

            }
        };
        reader.onerror = function(event) {
            alert("I AM ERROR: " + event.target.error.code);
        };
        reader.readAsDataURL(inputFile);
    });


    $(document).on('click','.delete-button',function(){
        var i = $(this).closest('.img-container').attr('data-index');
        $('#box'+i).remove();
        $('.images-area').append('<div class="img-container" data-status="0"><input type="file" style="display:none" id="upload-file" class="upload-file"><div class="image"></div></div>');
        var blank = 0;
        $('.img-container').each(function(i){
            $(this).attr({'id':'box'+i,'data-index':i});
            $(this).find('.upload-file').attr({'id':'upload-file'+i,'name':'photo-'+i});
            $(this).find('.btn-click').attr('onclick','$("#upload-file'+i+'").click()');
            if(($(this).attr('data-status') == 0) && (blank == 0)) {
                blank = i;
            }
        });
        if($('.img-container').find('.upload-add-product').length == 0) {
            $('#box'+blank+' .image').append('<a href="javascript:;" class="btn-click upload-add-product" onclick=\'$("#upload-file'+blank+'").click()\'><i class="fa fa-plus"></i></a>');
        }
    });
</script>

我努力理解你的任务..

看到这个会对你有帮助..