Publicidade

  • 0
renatto

Envio de imagens por favor so preciso de um peueno detalhe sobre " delete arr[0] " com o JAVASCRIPT

remover javascript

Pergunta

Postado (editado)

 

 

Tá aqui pessoal eu montei esse codigo doidinho rsrsr, mais ta tudo de boa ele functiona da seguinte forma :

 

1- o usuário escolhe uma imagem no formulario html, o formulario envia e o javascript exibe a miniaturas até ai ok.

 

eu coloquei um " X " PARA quando o ususario decidir remover a imagem antes de enviar ele clicka no X e a imagem remove até ai tambem ta funcionando

 

a questão é a seguinte !

 

quando o usuario clicka no X a imagem remove mais mesmo assim a imagem removida pelo javascript vai pro banco de dados a unica solução que achei foi com este comando

----> delete arr[2]; mais os usuario nao vão entrar no meu codigo procurar uma array e selecionar o numero da imagem para remover então eu queria colocar essa função neste comando

 

++++++++     <div data-img="' + x + '">'+x+'<a href="javascript:removeFile('+x+')"> x </a></div>' + "\n";   ++++++++

 

para uando apertar o X a imagem ser removida !

 

 

Muito gráto pelo atenção de todos, e de quem me da essa força boa tarde.

 

 

 

<script type="text/jscript">

var arr = [];
var x = 0;

 

 

function pegaArquivos(files){
    formdata = false;

  if (window.FormData) {
    formdata = new FormData();
    document.getElementById('btn').style.display = 'none';
  }

 

var li = document.createElement('li');
var list = document.getElementById('img-list');

 

var i = 0, len = files.length, formdata;
for(; i < len; i++){

var file = files;    
   
var img = document.createElement("img");       
    img.file = file;
    img.width = 75;
    img.height = 75;

 

 

 


arr[x] = file;


formdata.append('images[]', arr[x]);

 var a = document.createElement('a');
     a.innerHTML = '<div data-img="' + x + '">'+x+'<a href="javascript:removeFile('+x+')"> x </a></div>' + "\n";    
     

 


   
    li.appendChild(img);
    li.appendChild(a);
  list.appendChild(li);

 

 

        var reader = new FileReader();
        reader.onload = (function(aImg) {return function(e) {aImg.src = e.target.result;};})(img);
        reader.readAsDataURL(file);
                
}
x++;

 

 

    if (formdata) {
     $("#gol").click(function() {

          $.ajax({
          url: "upload.php",
          type: "POST",
          data: formdata,
          processData: false,
          contentType: false,
          success: function(res) {
            document.getElementById('response').innerHTML = res;
            }
         });
     });
  }      

 

}


function removeFile(x) {


//delete arr[x];
var el = $('[data-img="' + x + '"]');

    // CACA A NUMERACAO DA LISTA ::
    el.closest("li").remove();
    // PERCORRE A LISTA E REMOVE A NUMERACAO CLICKADA ::
}

</script>

 

 

FORMULARIO HTML

 

<form action="upload.php" enctype="multipart/form-data" method="post">
<input type="file" name="images" id="inputImage" onChange="pegaArquivos(this.files)"/>
<button type="submit" id="btn">Salvar</button>
</form>
<button id="gol">click</button>

 

 

 

 

 

 

 

 

 

 

Editado por renatto
Opinião de um usuário
0

Compartilhar este post


Link para o post
Compartilhar em outros sites

3 respostas a esta questão

  • 0
Em 20/04/2017 at 14:44, renatto disse:

Criei esse codigo doido com javascript mais estou com uma super dificuldade !

Esse codigo é uma galeria de imagens no FORMULARIO HTML ele envia e exibe as imagens em miniaturas

só que coloquei um X para quando for CLICKADO a imagem será removida ate ai beleza,

as imagens são removida de acordo com a escolha , mais tem um problema EX:

 

IMAGEM_01.JPEG -------- X CLICKOU NO X A IMAGEM É REMOVIDA

IMAGEM_02.JPEG -------- X

IMAGEM_03.JPEG -------- X

IMAGEM_04.JPEG -------- X

 

Se eu remover a IMAGEM_02.JPEG, no X remove tudo direitinho so que quando clicko em ENVIAR  a imagem 02 mesmo assim vai pro BANCO DE DADOS

 

tentei usar a arry  DELETE ARR[0]; deu certo mais nao sei criar um botão dinamicamente fiz de um jeito mais nao da certo

 

será que alguem pode me ajudar agradeço de coração.

 

 

JAVASCRIPT

 

<script type="text/jscript">

var arr = [];
var x = 0;

 

 

function pegaArquivos(files){
    formdata = false;


  if (window.FormData) {
    formdata = new FormData();
    document.getElementById('btn').style.display = 'none';
  }

 

var li = document.createElement('li');
var list = document.getElementById('img-list');

 

var i = 0, len = files.length, formdata;
// CONTA AS IMAGENS ::
for(; i < len; i++){

var file = files;    
   
var img = document.createElement("img");       
    img.file = file;
    img.width = 75;
    img.height = 75;

 

 

//-------------------------------------------------------------------------------------------------
//-------------------------------------------------------------------------------------------------
//-------------------------------------------------------------------------------------------------
//-------------------------------------------------------------------------------------------------

arr[x] = file;


// LINKS X QUE REMOVE AS IMAGENS ::
 var a = document.createElement('a');                      
a.innerHTML = '<div data-img="' + x + '" class=" '+ delete arr[x] +' ">'+x+'<a href="javascript:removeFile('+x+')" " class="remove"> x </a></div>' + "\n";    

 


formdata.append('images[]', arr[x]);

    li.appendChild(img);
    li.appendChild(a);
  list.appendChild(li);

        // MOSTRA AS IMAGENS EM MINIATURAS ::
        var reader = new FileReader();
        reader.onload = (function(aImg) {return function(e) {aImg.src = e.target.result;};})(img);
        reader.readAsDataURL(file);
                
}
x++;


    if (formdata) {
     $("#gol").click(function() {

          $.ajax({
          url: "upload.php",
          type: "POST",
          data: formdata,
          processData: false,
          contentType: false,
          success: function(res) {
            document.getElementById('response').innerHTML = res;
            }
         });
     });
  }      
}

 

function removeFile(x) {

var el = $('[data-img="' + x + '"]');

    // CACA A NUMERACAO DA LISTA ::
    el.closest("li").remove();
    // PERCORRE A LISTA E REMOVE A NUMERACAO CLICKADA ::
}

</script>

 

 

FORMULARIO HTML

 

 

<form action="upload.php" enctype="multipart/form-data" method="post">
<input type="file" name="images" id="inputImage" onChange="pegaArquivos(this.files)"/>
<button type="submit" id="btn">Salvar</button>
</form>
<button id="gol">click</button>

 

<div id="imgLocal"></div>
<ul id="img-list"></ul>

 

 

 

 

0

Compartilhar este post


Link para o post
Compartilhar em outros sites
  • 0
Em 21/04/2017 at 07:32, quintelab disse:

@renatto depois que editou seu post ficou dificil de entender o problema.

Editado maninho valeu pela atenção

0

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!


Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.


Entrar Agora

  • Próximos Eventos

  • Conteúdo Similar

    • Por gustavohmc
      Dada um vetor V com 13 elementos aleatórios entre 0 e 100, informar o último elemento par.
       
      Em um exercicio como esse, é possivel fazer um laço de repetição para criar os elementos? Com seria?
    • Por diulio
      Pessoal estou com dificuldades em montar a parte de conferir os números sorteados. Vou tentar explicar de forma objetiva.
      Tenho a tabela abaixo com dois registros (de exemplo):
      -- -- Estrutura da tabela `tb_numescolhidos` -- CREATE TABLE `tb_numescolhidos` ( `id` int(11) NOT NULL, `id_tb_participantes` int(11) DEFAULT NULL, `dezena01` int(2) DEFAULT NULL, `dezena02` int(2) DEFAULT NULL, `dezena03` int(2) DEFAULT NULL, `dezena04` int(2) DEFAULT NULL, `dezena05` int(2) DEFAULT NULL, `dezena06` int(2) DEFAULT NULL, `dezena07` int(2) DEFAULT NULL, `dezena08` int(2) DEFAULT NULL, `dezena09` int(2) DEFAULT NULL, `dezena10` int(2) DEFAULT NULL ) ENGINE=MyISAM DEFAULT CHARSET=utf8 COMMENT='Tabela com os números do jogo'; -- -- Extraindo dados da tabela `tb_numescolhidos` -- INSERT INTO `tb_numescolhidos` (`id`, `id_tb_participantes`, `dezena01`, `dezena02`, `dezena03`, `dezena04`, `dezena05`, `dezena06`, `dezena07`, `dezena08`, `dezena09`, `dezena10`) VALUES (1, 1, 5, 9, 18, 25, 33, 38, 41, 49, 51, 57), (2, 2, 1, 9, 16, 19, 27, 33, 39, 43, 56, 60); Criei uma tabela separada para os participantes, pois um participante pode ter vários jogos. Achei que seria a melhor forma.
      -- -- Estrutura da tabela `tb_participantes` -- CREATE TABLE `tb_participantes` ( `id` int(11) NOT NULL, `nome` varchar(50) DEFAULT NULL ) ENGINE=MyISAM DEFAULT CHARSET=utf8 COMMENT='Tabela dos participantes'; -- -- Extraindo dados da tabela `tb_participantes` -- INSERT INTO `tb_participantes` (`id`, `nome`) VALUES (1, 'Pessoa 01'), (2, 'Pessoa 02'), (3, 'Pessoa 03'); Agora tenho a segunda tabela com seus registros
      -- -- Estrutura da tabela `tb_sorteios` -- CREATE TABLE `tb_sorteios` ( `id` int(11) NOT NULL, `concurso` int(11) DEFAULT NULL, `data` date DEFAULT NULL, `numsorteado-dz01` int(2) DEFAULT NULL, `numsorteado-dz02` int(2) DEFAULT NULL, `numsorteado-dz03` int(2) DEFAULT NULL, `numsorteado-dz04` int(2) DEFAULT NULL, `numsorteado-dz05` int(2) DEFAULT NULL, `numsorteado-dz06` int(2) DEFAULT NULL ) ENGINE=MyISAM DEFAULT CHARSET=utf8 COMMENT='Sorteios da Mega Sena (Exemplo)'; -- -- Inserindo dados da tabela `tb_sorteios` -- INSERT INTO `tb_sorteios` (`id`, `concurso`, `data`, `numsorteado-dz01`, `numsorteado-dz02`, `numsorteado-dz03`, `numsorteado-dz04`, `numsorteado-dz05`, `numsorteado-dz06`) VALUES (1, 1920, '2017-04-12', 25, 31, 33, 39, 43, 45), (2, 1921, '2017-04-13', 5, 19, 23, 31, 33, 51), (3, 1922, '2017-04-14', 9, 19, 33, 34, 45, 59); Agora na página que exibe o nome do participante e seus jogos escolhidos com o total de acerto, não estou conseguindo fazer a parte de comparar os jogos(registro na tabela tb_numescolhidos) escolhidos pelo participante com os jogos sorteados ate o momento (tabela tb_sorteios) lembrando que a comparação é com todos os registros da tabela tb_sorteios.
      Então a comparação é 1 registro da tabela tb_numescolhidos com todos registros da tb_sorteios.
      Obs.: perceba que os registros da tabela tb_soterios podem ter números iguais de um registro para outro, mas na comparação não fará sentido comparar esses números mais de uma vez.
       
      Como poderia melhorar meu código abaixo?
      <?php // CONEXAO COM BANCO DE DADOS session_start(); include('./../conexao/conn.php'); // cria a instrução SQL que vai selecionar os dados $querySelect = sprintf("SELECT tb_numescolhidos.*, tb_participantes.`nome` FROM tb_numescolhidos INNER JOIN tb_participantes ON(tb_numescolhidos.`id_tb_participantes` = tb_participantes.`id`)"); // executa a query $dados = mysql_query($querySelect, $conexao) or die( mysql_error() ); // transforma os dados em um array $linha = mysql_fetch_assoc($dados); // calcula quantos dados retornaram $total = mysql_num_rows($dados); ?> <!doctype html> <html lang="pt-br"> <body> <div class="wrapper"> <div class="main-panel"> <div class="content"> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <div class="card"> <div class="card-header" data-background-color="purple"> <h4 class="title">Tabela dos Jogos</h4> <p class="category">Jogos cadastrados dos participantes</p> </div> <div class="card-content table-responsive"> <table class="table table-hover"> <thead> <tr> <th rowspan="2">Participantes</th> <th colspan="10" style="text-align: center;">Dezenas</th> <th rowspan="2">Total de Acertos</th> </tr> <tr> <th>1ª Dezena</th> <th>2ª Dezena</th> <th>3ª Dezena</th> <th>4ª Dezena</th> <th>5ª Dezena</th> <th>6ª Dezena</th> <th>7ª Dezena</th> <th>8ª Dezena</th> <th>9ª Dezena</th> <th>10ª Dezena</th> </tr> </thead> <?php // se o número de resultados for maior que zero, mostra os dados if($total > 0) { // inicia o loop que vai mostrar todos os dados do { ?> <tbody> <tr> <td><?=$linha['nome']?></td> <td><?=$linha['dezena01']?></td> <td><?=$linha['dezena02']?></td> <td><?=$linha['dezena03']?></td> <td><?=$linha['dezena04']?></td> <td><?=$linha['dezena05']?></td> <td><?=$linha['dezena06']?></td> <td><?=$linha['dezena07']?></td> <td><?=$linha['dezena08']?></td> <td><?=$linha['dezena09']?></td> <td><?=$linha['dezena10']?></td> <td> <?php /* Resultado da comparação dos números escolhidos com os números sorteados */ ?> </td> </tr> <?php // finaliza o loop que vai mostrar os dados }while($linha = mysql_fetch_assoc($dados)); // fim do if } ?> </tbody> </table> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>  
      Alguém tem ideia de como posso resolver esse problema?
       
      Desde já muito obrigado...
    • Por Jeovane Carvalho
       
       
       
      Olá senhores (as) boa tarde, estou tentando, fazer uma consulta no banco e extrair dados filtrados vindos de um array de uma combobox por exemplo:
       
      $MySQLi->query ("SELECT i.id, b.bairro,c.cidade,t.tipo_nome FROM  imoveis i LEFT JOIN bairros b ON  (b.id=bairro)LEFT JOIN cidades c ON  (c.id=cidade)LEFT JOIN tipos t ON  (t.id=tipo_nome) WHERE i.ativo='1' AND i.tipo='".$tipo."' AND i.cidade='".$id_cidade."' AND i.bairro='".$id_bairro."'" ORDER BY id DESC")
       
      Notem que na última concatenação ( $id_bairro ) é aonde eu recebo o array que por exemplo , lá na combo que desenvolvi se o usuário escolher 2 bairros , ele irá vir assim (id1, id 2) ..
      Aí dentro do SELECT iria ficar no id_bairro=1,2, e sei que isso é errado eu já divide a variável com implode separando com vírgula , mas da erro e a consulta não aparece na tela, mas se o usuário escolher apenas uma opção bairro ela chega corretamente, somente com array que estou tendo dificuldade de buscar a consulta. 
      E para ficar bem esclarecido, eu preciso que, com esse array id1, id2 , buscar essas 2 consultar e não todas do banco..
       
      Desde já agradeço a ajuda...
    • Por mattostiago
      Bom dia!
       
      To aprendendo um pouco de PHP, to na dúvida aqui:
       
      Criei um formulário para pegar alguns dados que serão necessários. Preciso salvar esses dados de formulário para futuramente comparar com os dados inseridos pelo usuário. Exemplo:
      O usuário vai escolher uma data de entrada e saída em um sistema de reservas, o sistema vai verificar se naquele período existe uma quantidade de noites mínimas para saber se ele pode ou não continuar a reserva. Em cada feriado por exemplo, as noites mínimas são diferentes. 

      Com o formulário abaixo a ideia é salvar os 'filtros' de noites mínimas para cada feriado. A questão é, como posso guardar esses dados? Em um Array ou melhor salvar em um banco de dados? Alguém pode me dar uma luz de como faço isso? rs
       
      <form action="noites.php" method="post" name="form_noites_minimas">
              <label>Nome: </label>
              <input type="text" name="nome[]" />
                  
              <label>Data inicio:</label>
              <input type="date" name="entrada[]"/>
                  
              <label>Data fim:</label>
              <input type="date" name="fim[]"/>
              
              <label>Minimo noites:</label>
              <input type="text" name="noites"/>
              
              <input type="submit" name="enviar"/>
      </form>
    • Por wneo
      Olá!
      Pessoal, preciso somar os valores vindos da tabela...
      Por exemplo,
      *Tenho 2 tabelas:
      -Produtos e budget;
      -Ao criar um budget, escolho os produtos e salvo o id de cada um separado por virgula em um campo da budget;
       
      1-Receber os valores em um foreach, pq eles estavam agrupados por vírgula em um campo;
      2-Exibir individualmente esses valores ($valor_cobrado);
      3-Somar e exibir na tela o total, que é a soma desses valores.
       
      O 1 e 2 já estão ok....
      <form class="form_budget" id="form_update_budget"> <?php while($row = mysql_fetch_array($rs_budgets)){ $id_budget = $row['id_budget']; $id_produto = $row['id_produto']; $nome_budget = $row['nome_budget']; ?> <fieldset> <legend align="left"><?php echo $nome_budget; ?></legend> <li> <label><span>Choosed products</span></label> <?php $prepara_resultado= explode(",", $id_produto); foreach($prepara_resultado as $newvalue){ $sql_produto_escolhido="SELECT * FROM produtos WHERE id_produto='$newvalue'"; $prepara_resultado = mysql_query($sql_produto_escolhido); $row = mysql_fetch_assoc($prepara_resultado); $id_produto_escolhido = $row['id_produto_escolhido']; $nome_produto_escolhido = $row['nome_produto']; $valor_cobrado = $row['valor_cobrado']; ?> <b><?php echo $nome_produto_escolhido; ?>(R$<b class="<?php echo $id_produto_escolhido; ?>_valor_produto"><?php echo $valor_cobrado; ?></b>) </b> - <?php }//end foreach explode ?> </li> <li> <label><span>Valor total</span></label> <b class="valor_total"></b> </li> <button>Abrir</button> </fieldset> <?php }//end while budgets ?> </form> ....Alguém consegue chegar no 3?????