Кнопка Удалить не работает
Всякий раз, когда я нажимаю кнопку Удалить, он удаляет все предварительные просмотры, которые я хочу удалить только этот предварительный просмотр... но на стороне сервера он удаляет только одно изображение.. для стороны сервера это не проблема... Любая помощь будет оценена по достоинству...
Что я уже пробовал:
<?php
if($_POST['image_form_submit'] == 1)
{
$con=new PDO("mysql:host=localhost;dbname=newimg","root","");
$images_arr = array();
foreach($_FILES['images']['name'] as $key=>$val){
$image_name = $_FILES['images']['name'][$key];
$tmp_name = $_FILES['images']['tmp_name'][$key];
$size = $_FILES['images']['size'][$key];
$type = $_FILES['images']['type'][$key];
$error = $_FILES['images']['error'][$key];
$rand = mt_rand(1000,10000000);
$target_dir = "uploads/";
$target_file = $target_dir.$_FILES['images']['name'][$key];
if(move_uploaded_file($_FILES['images']['tmp_name'][$key],$target_file)){
$images_arr[] = $target_file;
$addnew=$con->prepare("INSERT INTO attempt010(link,name,size,type)VALUES('$rand','$image_name','$size','$type')");
$addnew->execute();
}
$fetch_imgid=$con->prepare("SELECT id FROM attempt010 where link='$rand'");
$fetch_imgid->setFetchMode(PDO:: FETCH_ASSOC);
$fetch_imgid->execute();
$row=$fetch_imgid->fetch();
$delid = $row['id'];
}
//Generate images view
if(!empty($images_arr)){ $count=0;
foreach($images_arr as $image_src){ $count++?>
<span><ul class="reorder_ul reorder-photos-list" id="previewImg">
<li id="image_li_<?php echo $count; ?>" class="ui-sortable-handle">
<a href="javascript:void(0);" style="float:none;" class="image_link"><img src="<?php echo $image_src; ?>" alt=""></a>
<input type="text" name="imageCaption" id="imageCaption" placeholder="Enter Image Caption" />
<input type="submit" id="cap_btn" value="Caption Button" />
<?php
?>
<input type="submit" id="del_btn" value="Delete Image" />
</span>
</li>
</ul>
<script type="text/javascript">
$(document).ready(function () {
$("input#del_btn").click(function(){
$.ajax({
type: "POST",
url: "del.php", //
data: {id: <?php echo $delid; ?>},
success: function(){
var elem = document.getElementById('previewImg');
elem.remove();
},
error: function(){
alert("failure");
}
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$("input#cap_btn").click(function(){
$.ajax({
type: "POST",
url: "addcap.php", //
data: {id: imageCaption},
success: function(){
var elem = document.getElementById('previewImg');
elem.remove();
},
error: function(){
alert("failure");
}
});
});
});
</script>
<?php
}
}
}
?>
а это html страница
<!DOCTYPE html>
<html>
<head>
<title>Multiple Images Upload Using jQuery, Ajax and PHP by CodexWorld</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#images').on('change',function(){
$('#multiple_upload_form').ajaxForm({
target:'#images_preview',
beforeSubmit:function(e){
$('.uploading').show();
},
success:function(e){
$('.uploading').hide();
},
error:function(e){
}
}).submit();
});
});
</script>
</head>
<body>
<form method="post" name="multiple_upload_form" id="multiple_upload_form" enctype="multipart/form-data" action="upload.php">
<input type="hidden" name="image_form_submit" value="1"/>
<label>Choose Image</label>
<input type="file" name="images[]" id="images" multiple >
<div class="uploading none">
<label> </label>
<img src="uploading.gif"/>
</div>
</form>
<div class="gallery" id="images_preview"></div>
</div>
</body>
</html>