Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Artes Ussler

Exclusão sem refresh

Recommended Posts

Olá

 

Utilizo um sistema de cadastro de notícias com campos para imagens. 

 

Na parte de edição das notícias, existe um checkbox que, ao selecionado, exclui a imagem quando clicado no Atualizar e a página é recarregada e o PHP executado.

 

IMAGEM1.jpg.73631cf3d20994b4a4b8cc06041f9f9e.jpg

 

Mas eu queria mudar isso. Gostaria que a imagem fosse excluída sem dar um refresh na página. Seria algo como na imagem abaixo: você clica no botão Excluir, aparece uma mensagem se deseja realmente excluir a imagem e você confirma sem recarregar a página.

 

IMAGEM2.jpg.9253215223b31d14ba7c61af417e3a71.jpg

 

Tem como fazer? Fico grato por qualquer dica.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Seria melhor se tivesse o HTML do formulário aí.

Pois existem duas formas simples para fazer isso, enviando uma requisição GET ou POST ambos poderiam ser enviadas por AJAX.

Não vou mostrar um exemplo por desconhecer a  estrutura html do formulário, pois teria que saber como chegar até essa imagem, ou mesmo pode haver mais de um formulário como esse na página.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá

 

Então, segue abaixo o trecho que cadastra ou exclui a imagem do servidor e do banco de dados:

//IMAGEM 1
	if ($_POST['exc1'] == null)
	{
		if ($_FILES['img1']['name'] != null)
	{
		$carregar1 = WideImage::loadFromUpload('img1');
        $imagem1 = $carregar1->resize(572, '1000', 'inside', 'down');
		$watermark1 = WideImage::load('../assets/files/informativos/marcadagua.gif');
		$imagemfinal1 = $imagem1->merge($watermark1, "right -25", "bottom -35", 80);
		$nomeimagem1 = time().'_'.rand(10,99).".jpg";
		$local1 = '../assets/files/informativos/'.$nomeimagem1;
		$imagemfinal1->saveToFile($local1, 70);
	} else {$nomeimagem1 = $img1;}
				} else {
		unlink('../assets/files/informativos/'.$img1);
		$nomeimagem1 = null;
		}

 

e abaixo o trecho em HTML:

<input name="img1" type="file" class="span6" id="img1"><br />
<img src="../assets/files/informativos/<?php echo $img1; ?>" width="80px" /> 
<input name="exc1" type="checkbox" id="exc1" value="1" style="margin-left:20px;" /> Selecione para excluir esta imagem.

basta marcar o checkbox, clicar Atualizar e a imagem é excluida. 

 

Mas gostaria de excluir ela sem precisa recarregar a página. 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Segue exemplo, abaixo:

 

INDEX.PHP:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">

		<title> EXAMPLE </title>

		<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
	</head>

	<body>
		Imagem 1:<input type="checkbox" class="exc1" name="exc1" value="imagem1.png" />
		<br />
		Imagem 5:<input type="checkbox" class="exc1" name="exc1" value="imagem5.png" />
		<br />
		<button class="deletar">Deletar</button>

		<script type="text/javascript">
		$(function()
		{
			$('.deletar').click (function()
			{
				var selected = new Array();

				// Coloca os valores em um array
				$('.exc1:checked').each(function(){
					selected.push($(this).val());
				});

				// Deleta via AJAX
				$.ajax({
					url: "http://localhost/deleta.php",
					type: "POST",
					data: {
						imagens: selected
					},
					success: function (msg){
						alert(msg);
					}
				});
			});
		});
		</script>
	</body>
</html>

DELETA.PHP

<?php

if(isset($_POST['imagens'])){
	$relatorio = "";

	foreach ($_POST['imagens'] as $img){
		$path = "caminho/arquivo/" . $img;

		if(@unlink($path)){
			$relatorio.= "O arquivo '{$img}' foi deletado!\n";
		}else{
			$relatorio.= "Falha ao deletar o arquivo '{$img}'!\n";
		}
	}

	echo $relatorio;
}else{
	echo "Selecione uma imagem!";
}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
Em 07/02/2020 at 15:13, Artes Ussler disse:

<input name="img1" type="file" class="span6" id="img1"><br />
<img src="../assets/files/informativos/<?php echo $img1; ?>" width="80px" /> 
<input name="exc1" type="checkbox" id="exc1" value="1" style="margin-left:20px;" /> Selecione para excluir esta imagem.

 

 

JS e CSS necessários:

https://github.com/Spell-Master/sm-web/tree/master/javascript/AjaxRequest

 

<input name="img1" type="file" class="span6" id="img1"><br />
<img src="../assets/files/informativos/<?= $img1; ?>" width="80px" /> 
<input name="exc1" type="checkbox" id="exc1" value="1" style="margin-left:20px;" /> Selecione para excluir esta imagem.

<div id="executa_ajax"></div>

<script>
    document.getElementById('exc1').addEventListener('change', apagaImagem, false);

    function apagaImagem(e) {
        var alvo = e.target;
        var imagem = alvo.previousElementSibling; // Obtenho a imagem
        if (alvo.checked) { // O checkbox deve está marcado
            apagaImagem.prototype = new AjaxRequest();
            apagaImagem.prototype.open('executa_ajax', 'arquivo_que_apaga.php?alvo=' + imagem.src + '&id=' + imagem.id);
        }
    }
</script>

Com isso ao marcar o checkbox iniciamos a classe AjaxRequest que irá carregar o arquivo responsável por apagar a imagem enviando um $_GET['alvo'] com exatamente o src da imagem, com essa informação então é só apagar a imagem. Ainda nesse arquivo enviamos também o #ID da imagem então ao excluir a imagem podermos usar o seguinte script:

document.getElementById('<?= $_GET['id'] ?>').src = null;

Assim sendo ao apagar a imagem removemos também ela do html.

 

Demais exemplos de uso no AjaxRequest você encontra no arquivo exemplo.html no link citado acima.

Caso interesse também criei alguns scripts dito próprio para uploads:

https://github.com/Spell-Master/sm-web/tree/master/javascript/FileTransfer

https://github.com/Spell-Master/sm-web/tree/master/exemplos/corte-e-salvamento-de-imagens

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por ILR master
      Tudo bem pessoal?
       
      No código abaixo, estou fazendo uma consulta nas tabelas, banners e banners_referencia
      Meu objetivo é trazer resultados com valores iguais ao nome da cidade declarada na $cidade ou resultados com a referencia Total.
      O problema é que está trazendo todos os resultados. Tenho 10 linhas, 1 com o nome da cidade e duas com o valor Total, então o resultado teria que ser de apenas 3 linhas, mas mostra tudo.
       
      $banner = "SELECT A.*, B.* FROM banners A, banners_referencia B WHERE B.cod_referencia = A.cod_referencia AND A.cidade = '$cidade' OR B.referencia = 'Total' ORDER BY RAND()";
      $banner = mysqli_query($conexao, $banner) or die ("Banner não encontrado");
      while($busca= mysqli_fetch_array($banner)){
          print $busca['cidade'].'<br>';
      };
       
      Alguém consegue me ajudar?
    • Por Rafael_Ferreira
      Não consigo carregar a imagem do captcha do meu formulário. Foi testado com o xampp e easyphp. Também não carregou a imagem de outros captcha. 
       
       
    • Por luiz monteiro
      Olá, tudo bem?
       
      Estou melhorando meu conhecimento em php e mysql e, me deparei com o seguinte. A tabela da base de dados tem um campo do tipo varchar(8) o qual armazena números. Eu não posso alterar o tipo desse campo. O que preciso é fazer um select para retornar o números que contenham zeros a direita ou a esquerda.
      O que tentei até agora
       
      Ex1
      $busca = $conexao->prepare("select campo form tabela where (campo = :campo) ");
      $busca->bindParam('campo', $_REQUEST['campo_form']);
       
      Se a direita da string $_REQUEST['campo_form'] termina ou inicia com zero ou zeros, a busca retorna vazio.
      Inseri dados numéricos, da seguinte maneira para testar: 01234567;  12345670: 12345678: 12340000... entre outros nessa coluna. Todos os valores que não terminam ou não iniciam com zero ou zeros, o select funciona.
       
       
      Ex2
      $busca = $conexao->prepare("select campo form tabela where (campo = 0340000) ");
      Esse número está cadastrado, mas não retorna.
       
      Ex3
      $busca = $conexao->prepare("select campo form tabela where (campo = '02340001' ) ");
      Esse número está cadastrado, mas não retorna.
       
       
      Ex4
      $busca = $conexao->prepare("select campo form tabela where (campo like 2340000) ");
      Esse número está cadastrado, mas não retorna.
       
      Ex5
      $busca = $conexao->prepare("select campo form tabela where (campo like '12340000') ");
      Esse número está cadastrado, mas não retorna.
       
      Ex6
      $busca = $conexao->prepare("select campo form tabela where (campo like '"12340000"' ) ");
      Esse número está cadastrado, mas não retorna.
       
       
      Ex7
      $busca = $conexao->prepare("select campo form tabela where (campo like :campo) ");
      $busca->bindParam('campo', $_REQUEST['campo_form'])
      Não retorna dados.
       
      O  $_REQUEST['campo_form'] é envio via AJAX de um formulário. 
      Usei o gettype para verificar o post, e ele retorna string.
      Fiz uma busca com número 12345678 para verificar o que o select retorna, e também retrona como string.
       
      Esse tipo de varchar foi usado porque os números que serão gravados nesse campo,  terão zeros a direita ou na esquerda. Os tipos number do mysql não gravam zeros, então estou usando esse. O problema é a busca.
      Agradeço desde já.
       
       
    • Por daemon
      Boa tarde,
       
      Eu tenho uma rotina que faz uma leitura do arquivo .xml de vários sites.

      Eu consigo pegar o tópico e a descrição, e mostrar a imagem que esta na pagina do link.
      Para isso utilizo esta função:
      function getPreviewImage($url) { // Obter o conteúdo da página $html = file_get_contents($url); // Criar um novo objeto DOMDocument $doc = new DOMDocument(); @$doc->loadHTML($html); // Procurar pela tag meta og:image $tags = $doc->getElementsByTagName('meta'); foreach ($tags as $tag) { if ($tag->getAttribute('property') == 'og:image') { return $tag->getAttribute('content'); } } // Se não encontrar og:image, procurar pela primeira imagem na página $tags = $doc->getElementsByTagName('img'); if ($tags->length > 0) { return $tags->item(0)->getAttribute('src'); } // Se não encontrar nenhuma imagem, retornar null return null; } // Uso: $url = "https://example.com/article"; $imageUrl = getPreviewImage($url); if ($imageUrl) { echo "<img src='$imageUrl' alt='Preview'>"; } else { echo "Nenhuma imagem encontrada"; }  
      Mas estou com um problema, esta funcão funciona quando coloco em uma pagina de teste.php. Preciso mostrar em uma página inicial diversas fotos de todos os links. (No caso acima só funciona 1).
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.