如何在任何框中删除上传的图像？ [英] How to remove the uploaded image in any box?
本文介绍了如何在任何框中删除上传的图像？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的代码很长。我不能在这里告诉你们。我只显示javascript代码
My code is very long. I can not show you all here. I just show the javascript code only
我这样的javascript：
My javascript like this :
<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
You can see my complete code and demo here : http://www.phpfiddle.org/main/code/adjv-sfuy
我使用show hide来添加，删除和编辑图像。如果你看一下这个演示，它就有用了。图像可以编辑，删除和添加
I use show hide to add, delete and edit image. If you look at the demo, it has worked. Images can be edited, deleted and added
但我的问题是当用户确实删除图像时
But my problem is when the user does delete image
当用户删除图像，删除最后一个框上的图像。应该是当用户删除图像时，我点击其删除按钮的图像被删除
When user delete an image, the image on last box is deleted. Should be when user delete an image, then the image that I click its delete button is deleted
例如我输入了5张图像。将图像删除为3时，图像删除为3
For example I input 5 image. When deleting image to 3, image to 3 deleted
我一直在尝试修改代码几天，但我还没有找到解决方案
I've been trying to modify the code for some days, but I have not found a solution
有没有人可以帮助我？
推荐答案
使用jquery功能来做复杂的事情非常简单。
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..
看到它会帮助你..
这篇关于如何在任何框中删除上传的图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
