【问题标题】:How to remove the uploaded image in any box?如何删除任何框中上传的图像?
【发布时间】:2017-10-25 20:58:29
【问题描述】:

我的代码很长。我不能在这里向大家展示。我只显示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 被删除

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

有没有人可以帮助我?

【问题讨论】:

  • 我不明白你为什么不让所有的空框都显示它们的+ 符号。这更简单,不会真正影响用户体验。
  • 另外,如果您使用的是 jQuery,请尝试坚持使用 jquery,而不是像 document.getElementBy 那样使用 $("#blah")。而且您不会真正获得使用当前代码移动内容的效果,因为您只是显示/隐藏 div。
  • @A.刘,这是个好主意。但这是我的客户要求。见杰森的回答。它减少了我的问题。但仍有不足之处。
  • 您是否根据 jason 的建议更新了您的代码?
  • @A.刘,还没有。我会更新的

标签: javascript php jquery html css


【解决方案1】:

对不起,我误会了。

可能你需要在删除一张图片后进行判断,确保下一张图片不显示。

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

这样可以减少杂乱。

【讨论】:

  • 你应该好好阅读我的问题。在回答之前,你应该先尝试一下
【解决方案2】:

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

添加:当前照片计数,将删除方法更改为使用当前而不是“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>

【讨论】:

  • 我不是这个意思。例如,我上传了 5 张图片,然后我删除了第三个框中的图片。然后第三个框上的图像被移除
  • 其实你的回答减少了我的问题。只是当我删除一个图像时,最后一个盒子上的图像被删除了。应该是当我删除一个图像时,然后我点击删除按钮的图像被删除
  • 是的,我看到它并没有完全修复它。当我再次尝试编辑它时,我已经接近了,但我建议重写。代码很乱,要跟踪的状态太多。
  • 如果我重写代码。你还有更好的主意吗?
【解决方案3】:

这是我的回答: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);
    }
}

【讨论】:

  • 好的。谢谢。似乎还不完美。我尝试上传5张图片。然后我删除第一张图片,我看到删除的不是第一张图片,而是第五张图片。删除的图片应该是第一张图片
  • 你的代码:for (; start &lt; finish - 1; start++),有点奇怪。我第一次看到它。循环通常是这样的:for (i=0; i &lt; test; i++)
  • 那是因为这些是可选的,你甚至可以拥有for(;;)。它只是使一个无限循环。我不需要定义任何东西,因为我已经定义了它。
  • 好的。你还有更好的主意吗?我已经修复了这个错误。但是在使用show hide时,似乎需要做很多工作才能使其完美
  • 我需要你的帮助。看看这个:stackoverflow.com/questions/44674975/…
【解决方案4】:

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

我努力理解你的任务..

看看这个对你有帮助..

【讨论】:

  • 太棒了。谢谢。看起来你的方式更好。我将申请我的案子
猜你喜欢
  • 2012-09-04
  • 2017-07-09
  • 1970-01-01
  • 2022-01-01
  • 2016-12-02
  • 2014-11-29
  • 1970-01-01
  • 2021-08-28
  • 1970-01-01
相关资源
最近更新 更多