Estoy desarrollando una galería de imágenes, pero necesito saber como hacer para que el usuario pueda eliminar las fotos que el mismo suba al sitio.
Mi sitio web tiene la función de alojar las fotos que el usuario desee, y alojar la url de esa imagen en una base de datos. Pero no tengo una idea concisa de como hacer que al presionar un botón, se pueda borrar esa foto seleccionada.!
CÓDIGOS...
// CODIGO JS - jQuery 3.3.1
$('.albumes img').click(function(){
var img_click = $(this);
$('.photo').show('slow');
$('.photo .img').html(img_click);
})
$('#btn_quit').click(function(){
$('.photo').hide('slow');
})
// En esta área hago que aparezca el "modal" como le dicen, es decír, el area donde se amplifica la foto y se va pasando a la siguiente o anterior..
/* CODIGO CSS */
#send_flimg{
font-size: 40px;
width:15%;
padding: 10px 0px;
border: none;
background: rgba(255,255,255,0.4);
color: orange;
outline-color: orange;
}
fieldset{
border-color: #fff;
}
.nw_albm{
color: #fff;
}
#fl_img{
color: #fff;
}
/*Albumes e imágenes del usuario.*/
.albumes{
width: 100%;
flex-wrap: wrap;
display: flex;
/* justify-content: space-around;*/
}
.albumes img{
width: 200px;
height: 150px;
margin: 10px;
border: 1px solid orange;
}
.albumes img:hover{
cursor: pointer;
transform: scale(1.1);
transition: 0.5s all;
}
/*Photo*/
.photo{
position: fixed;
background-color: rgba(0,0,0,0.8);
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
}
.photo button{
padding: 5px;
border-radius: 100%;
border: none;
font-size: 50px;
color: #fff;
background: transparent;
outline: none;
}
.image{
display: flex;
width: 80%;
}
.photo img{
width: 100%;
height: 100%;
}
.options_photo{
width: 100%;
padding: 5px 50px;
background: rgba(255,255,255,0.2);
margin-bottom: 10px;
display: flex;
}
#btn_quit{
position: absolute;
right: 50px;
}
<!-- CODIGO HTML -->
<div class="albumes" align="center">
<?php
$usuario = $_SESSION['usuario'];
$conexion = mysqli_connect("localhost", "root", "","imagen");
if (!$conexion) {
die("Fallo la conexión a la Base de Datos: " . mysql_error());
}
if (isset($_POST['upload'])) {
$dir_album= "usuarios/".$usuario."/Album";
$archivo = $_FILES['fl_album']['tmp_name'];
$nombrearchivo = $_FILES['fl_album']['name'];
move_uploaded_file($archivo, $dir_album."/".$nombrearchivo);
$ruta_img = $dir_album."/".$nombrearchivo;
$saveIMG = mysqli_query($conexion,"INSERT INTO imagephp VALUES('','".$usuario."','".$ruta_img."')");
}
$selectURL = mysqli_query($conexion, "SELECT URL_img FROM imagephp WHERE Usuario = '".$usuario."'");
while ($url = mysqli_fetch_assoc($selectURL)) {
echo "<img src='".$url['URL_img']."'/>";
}
?>
</div>
<div class="photo" align="center">
<nav class="options_photo">
<li><a href="#" id="btn_download" download="img.jpg"><span class="fa fa-download"></span></a></li>
<li><button id="btn_delete"><span class="fa fa-delete"></span></button></li>
<li><button id="btn_quit">X</button></li>
</nav>
<div class="image">
<button id="btn_back"><span class="fa fa-arrow-circle-left"></span></button>
<div class="img"></div>
<button id="btn_next"><span class="fa fa-arrow-circle-right"></span></button>
</div>
</div>
Lo que quiero hacer es que, si dieron cuenta, arriba de la foto hay un "nav" que tiene opcion de descarga, quitar el area, y eliminar per falta un botón de eliminar y quiero que cuando se presiona ese botón esa foto seleccionada se borre de la base de datos