Ir para conteúdo
  • 0
renatto

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

Pergunta

 

 

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

3 respostas a esta questão

Recommended Posts

  • 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>

 

 

 

 

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

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


  • Conteúdo Similar

    • Por orbitdigital
      Olá,
       
      Tenho o seguinte código php
       
              $query_token_plano = $pdo->query("SELECT token, nome FROM cadastro_planos WHERE token_seguradora = '4bd3b824312ea073f0c63de1b9d6694a'")->fetchAll();
                      
              foreach($query_token_plano as $linha){
                  $id_plano = $linha['token'];
                  
                  $query_rede_credenciada = $pdo->query("SELECT id_rede_credenciada FROM assoc_planos_rede_credenciada WHERE token_plano = '$id_plano'")->fetchAll();
                  
                  
                  foreach($query_rede_credenciada as $ln){
                      $id_rede_credenciada = $ln['id_rede_credenciada'];
                      
                      $query_cidades = $pdo->query("SELECT cidade FROM cadastro_rede_credenciada WHERE id = '$id_rede_credenciada'")->fetchAll();
                      
                      foreach($query_cidades as $row){
                          $cidade = $row['cidade'];
                      }
                  }
              }
       
      Porém a variável $cidade quando impressa, mostra todos os registros de acordo com os parâmetros.
       
      Quero imprimir apenas um único valor de cada, por exemplo, se existirem 10 linhas cadastradas e 3 contiverem a cidade "São Paulo" então imprimirá apenas 1 vez o nome da cidade e não três.
       
       
    • Por SRodrigues
      Olá pessoal. Minha dúvida é basicamente em transformar os dados de uma consulta SQL em array no php, e retornar para o javascript para que eu possa acessá-lo através de índices por exemplo, ou de qualquer outra forma.
       
       
      código javascript
      $.ajax({ type : 'post', data : 'a='+a, url : 'abrirAcesso.php', success: function(data) { alert(data[0]['ano']); } codigo php "abrirAcesso.php"
       
      $conn = new mysqli("127.0.0.1", "root", "", "bdname"); $val = 42; $query_select_ano = "SELECT ano FROM reposito WHERE id_acesso = '$val'"; $resulta_ano = $conn->query($query_select_ano); while ($row = $resulta_ano->fetch_assoc()) { $valArAno = $row['ano']; array_push($valArAno); } echo( json_encode( $valArAno ) ); vamos supor que tenha 3 valores retornados do Banco (2015, 2016, 2017)
       
      então no javascript eu queria acessar esses 3 valores.
       
      Alguém sabe onde estou errando? ou tem uma outra ideia ?
       
      agradeço.
    • Por gust.php
      Prezados, boa noite.
       
      Preciso imprimir a quantidade de vezes que um caracter esta repetido em uma frase:
       
        FRASE = "JAVA É MUITO DIFÍCIL"
       A - 1
       I - 2
       
      Consegui ate aqui:
       
      import java.util.*; public class repetidos {   public static void main (String args[]){         Scanner leitor = new Scanner(System.in);         String s = "";         System.out.printf("Digite uma palavra ou frase contendo no maximo 26 caracteres:");         s = leitor.nextLine();         int i = 0, j = 0, cont = 0;         char c,d,caracter;         char[] letra;         letra = new char[s.length()];         for (j = 0; j < s.length(); j++)         {             for(i = j + 1 ; i < s.length();i++)             {                 c = s.charAt(i);                 d = s.charAt(j);                 if (c == d) {                     cont++;                     caracter = d;                     letra[j] = d;                    System.out.println(caracter + "  -  " + cont);                 }             }         }     } }  
      Podem Ajudar ?
    • Por orbitdigital
      Olá, preciso de uma ajuda com um código.
       
      Tenho uma página que busca no banco de dados as informações de uma "Seguradora" e lista todos os "Planos" atribuídos a ela:
       
      https://jsfiddle.net/6fnpxjz8/4/
       
      Dentro de cada plano tenho um select do tipo multiple="multiple" que é populado com todas as opções de unidades médicas disponíveis em uma outra tabela, e por meio de comparação com as associações, já marca quais foram selecionados no momento do cadastro.
       
      No link acima deixei dois grupos como exemplo, o primeiro com alguns itens marcados e o segundo com outros itens marcados.
       
      Como identificador de cada plano tenho o retorno do banco de dados em um input type="hidden".
       
      Preciso saber como faço para capturar esses dados e savá-los no banco de dados fazendo um update (considerando que já estão cadastrados e a página em questão fornece a opção de mudanças), ou seja, o usuário pode por exemplo marcar mais opções de unidades, ou desmarcar opções, ou ainda alterar outras partes do cadastro sem alterar o select.
       
      Alguém consegue me ajudar como faço isso?
       
       
       
    • Por viniciuzvieira
      Galera, boa noite.
       
      Estou participando de um desafio.
      Já pensei em que forma resolver conceitualmente, mas ainda manjo pouco de PHP para codificar. Aqui vai a minha dúvida:
       
      A grande tarefa é pegar todos os links que estão dentro do atributo "href="", referenciando só os que estão dentro da lista. E colocar dentro de um array, pois depois preciso pegar todos os links, e inserir em uma tabela do mysql.
       
      Estou falando de PHP,  porque estou fazendo com o WordPress, mas podem me falar a solução em outra linguagem também.
      <div class="pull-right article-index"> <ul class="nav nav-tabs nav-stacked"> <li class="toclink active"> <a href="/home/index.php/lista-de-links?showall=" class="toclink active">Lista de Links</a> </li> <li><a href="/home/index.php/lista-de-links?showall=&amp;start=1" class="toclink">ANAC - Servi&ccedil;os</a></li> <li><a href="/home/index.php/lista-de-links?showall=&amp;start=2" class="toclink">ANAC - Manuais de Forma&ccedil;&atilde;o</a></li> <li><a href="/home/index.php/lista-de-links?showall=&amp;start=3" class="toclink">Meteorologia - Metar e TAF</a></li> <li><a href="/home/index.php/lista-de-links?showall=&amp;start=4" class="toclink">Meteorologia - Informa&ccedil;&otilde;es Gerais</a></li> <li><a href="/home/index.php/lista-de-links?showall=&amp;start=5" class="toclink">Plano de Voo - Naega&ccedil;&atilde;o A&eacuteeacute;rea</a></li> <li><a href="/home/index.php/lista-de-links?showall=1" class="toclink"> Todas as Páginas</a></li> </ul> </div> <div itemprop="articleBody">  
       
      Para inserir na tabela pensei no seguinte:
      $array = array("link1","link2","link3"....); for($c = 0; $c < $array.length; $c++){ mysql_qeury("INSERT INTO tabela (campo) VALUES ('$array[$c]')"); }  
      Porém não sei como pegar todos esses links e colocar dentro de um array.
      Espero que consigam entender o meu problema kk.
       
       
×

Informação importante

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

Este projeto é mantido e patrocinado pelas empresas:
Hospedado por: