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

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

对不起，我误会了。

Mayby在删除图像后需要判断，以确保下一张图像不显示。

$('#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

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

添加：当前照片计数，更改删除方法以使用当前而不是＆＃39; i＆＃39;，增加上传计数和删除计数。

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