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

我的代码很长。 我不能在这里告诉你们。 我只显示javascript代码

我的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"; } } };  

您可以在此处查看我的完整代码和演示： http ： //www.phpfiddle.org/main/code/adjv-sfuy

我使用show hide来添加，删除和编辑图像。 如果你看一下这个演示，它就有用了。 可以编辑，删除和添加图像

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

当用户删除图像时，最后一个框上的图像将被删除。 应该是当用户删除图像时，我单击其删除按钮的图像将被删除

例如，我输入了5张图像。 删除图像为3时，图像删除3

我一直试图修改代码几天，但我还没有找到解决方案

有没有人可以帮助我？

Answer 1

使用jqueryfunction可以非常简单地执行复杂的操作。

 "; print_r($_FILES); for($i=0;$i
"; } ?> 

 

  

  

    

  
  
   
 我努力了解你的任务.. 
 看到它会帮助你.. 

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

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

补充：当前照片计数，更改删除方法使用当前而不是’i’，增加上传计数和删除计数。

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