How to remove the uploaded image in any box?

Question

My code is very long. I can not show you all here. I just show the javascript code only

My javascript like this :

Answer 1

I have found out your problem. Your delete function does not detect the number of photos currently uploaded but simply deletes the last one.

Added: current photo count, changed delete method to use current instead of 'i', increment count on upload and decrement count on delete.

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

Sorry, I was misunderstand.

Mayby you need a judgement after you delete an image that make sure the next image is not show.

$('#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 = "";
    }
});

This can descrease the messy.

Answer 3

Here's my answer: http://phpfiddle.org/main/code/0h1g-mvus

I just shift the images instead. You might need to do some changes to pass values or 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);
    }
}

Answer 4

Use jquery features for doing complex things very simple.

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

I put efforts for understand your task..

See this it will help you..