0

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

1 respuesta 1

0

Una opción es asignar un atributo data con el id de la imagen, luego usar este atributo para eliminar de la base de datos.

Ejemplo con el código expuesto...

...
$selectURL = mysqli_query($conexion, "SELECT URL_img FROM imagephp WHERE Usuario = '".$usuario."'");

            while ($url = mysqli_fetch_assoc($selectURL)) {
                echo "<img src='".$url['URL_img']."'/>";
            }
...

Cambiarlo por algo así...

...
$selectURL = mysqli_query($conexion, "SELECT * FROM imagephp WHERE Usuario = '".$usuario."'");

    while ($url = mysqli_fetch_assoc($selectURL)) {
        echo "<img src='".$url['URL_img']."' data-idimagen='".$url['id_imagen']."' id='imagen_".$url['id_imagen']."' class='imagen_delete'/>";
    }
...

Luego utilizas este data en tu JQuery ...

 // Cuando hagan click en la imagen ...
    $('.imagen_delete').on('click', function(){

        // recogemos el valor del id de la imagen
        var id_imagen = $(this).data('idimagen');


       // Aquí ejecutas el código que necesites con el valor del id.
      // Seudo código: ELimina la imagen con el id = id_imagen
      // $('imagen_'+id_imagen).css('display', 'none');

    });

El código no esta testado, pero debería ser algo así.


Resumiendo...

  • Introduce el id en un atributo data del img.
  • Este img asignale una class para poder referenciarla en tu JQuery.
  • Asiganle un id único a este img (Lo podrás usar par hacer un display:none luego)
  • Crea un JQuery para que cuando alguien pulse en el class x suceda algo.
  • Dentro del JQuery capturas el valor de atributo data con el id.
  • Una vez aquí puedes hacer un ajax para eliminar el id de la base de datos y luego ocultar la imagen x.

Esto está pensado para cuando pulsen encima la imagen, pero puedes hacer lo mismo pero en vez de dentro del img por ejemplo creas un div ...

<div data-idimagen='".$url['id_imagen']."' id='imagen_".$url['id_imagen']."' class='imagen_delete' >ELiminar Imagen</div>

Espero que te sirva.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.