如何在任何框中删除上传的图像？

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>

我努力理解您的任务。

看到这将对您有帮助。

Answer 2

抱歉，我误会了。

删除图像后，可能需要做出判断，以确保不显示下一张图像。

 $('#thumbnail-view-delete-'+i).click(function(){ $('input[name="photo-'+i+'"]').val(''); document.getElementById("thumbnail-view-li-"+i).style.display = "none"; document.getElementById("thumbnail-upload-li-"+i).style.display = ""; if(document.getElementById("thumbnail-view-li-"+(i+1)).style.display === "none"){ document.getElementById("thumbnail-upload-li-"+(i+1)).style.display = "none"; document.getElementById("thumbnail-slot-li-"+(i+1)).style.display = ""; } }); 

这可以减少混乱。

Answer 3

我发现了你的问题。 您的删除功能不会检测当前上传的照片数量，而只会删除最后一张。

补充：当前照片计数，更改了删除方法以使用当前图像代替“ i”，上传时增加计数，删除时减少计数。

<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>

Answer 4

这是我的答案： http : //phpfiddle.org/main/code/0h1g-mvus

我只是移动图像而已。 您可能需要进行一些更改以传递值或w / e。

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 = "";
        shift_image(i);
    });
}

function shift_image(start)
{
    let finish = 4;
    for (; start < finish - 1; start++)
    {
        let next = $('#thumbnail-view-'+(start+1)).attr('src');
        $('#thumbnail-view-'+start).attr('src', next);
    }
}