Tenho uma página (up.php) que mostra o seguinte:
Quero fazer o seguinte, ao clicar em Apagar em qualquer uma delas, apareça um fa-cog centralizado na imagem e depois remova ela dali.
O que tenho até agora faz o serviço, mas visualmente é ruim:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<style>
.meio {
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
</style>
<?php
$path = "img/";
$diretorio = dir($path);
while($arquivo = $diretorio -> read()) {
if (substr($arquivo, 0, 6) == 'modelo' ) {
$fotoscaminhocompleto[] = $path.$arquivo;
$nomearquivo[] = pathinfo($arquivo, PATHINFO_FILENAME);
$extarquivo[] = pathinfo($arquivo, PATHINFO_EXTENSION);
}
}
$diretorio -> close();
echo '<form method="post" id="apagarfoto" action="#">';
for ($x=0;$x<count($nomearquivo);$x++) {
echo '<div style="float: left; padding:5px;" align="center" id="'.$nomearquivo[$x].'">';
echo $nomearquivo[$x].'<br />';
echo '<input type="hidden" name="apagar" value="'.$nomearquivo[$x].'.'.$extarquivo[$x].'" />';
echo '<img src="'.$path.'/'.$nomearquivo[$x].'.'.$extarquivo[$x].'" width="100px" /><br />';
?><button type="submit" onclick="myAjax('<?php echo $nomearquivo[$x]; ?>');"><i class="fa fa-trash"></i> Apagar</button><br /><?php
echo '</div>';
}
echo '</form>';
?>
<script>
function myAjax(nome) {
var nomediv = nome;
$('#apagarfoto').submit(function(e) {
e.preventDefault();
var serializeDados = $('#apagarfoto').serialize();
$.ajax({
type: "POST",
url: "foto_apagar.php",
dataType: "html",
data: serializeDados,
beforeSend: function() {
document.getElementById(nomediv).innerHTML = '<div align="center"><i class="fa fa-spin fa-cog fa-3x"></i></div>';
},
complete: function() {
document.getElementById(nomediv).innerHTML = "";
},
success: function (data, textStatus) {
},
error: function(xhr, er) {
$("#resposta").html("Erro!");
}
});
});
};
</script>
E a página em PHP que executa a "exclusão" (na verdade renomeia) é a seguinte:
<?php
error_reporting(0);
ini_set(“display_errors”, 0 );
$base_dir = 'img/';
$retorno = rename($base_dir.$_POST['apagar'], $base_dir.'renomeado_'.$_POST['apagar']);
//sleep(3);
/*
if ($retorno == 1) {
header("location: up.php");
} else {
echo 'Nao foi possivel executar a operacao. Entre em contato com o webmaster da pagina.';
}
*/
?>
Sei que tá meio confuso mas o que pretendo é o seguinte: Procurar na pasta "img" as figuras que começam com o nome "modelo" e exibi-las para o usuário apagá-las se quiser. O usuário vai achar que apagou mas elas permanecerão na pasta, apenas serão renomeadas e não aparecerão mais.
Precisando de alguma complementação estou à disposição!
Obrigado antecipadamente!