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 Danilo - Jesus voltará!
      Olá pessoal, estou com uma dificuldade aqui, vou gravar no banco de dados os produtos de um pedido da seguinte forma: id_produto:qtd_produto e ficaria assim no banco: 100:5,101:8,105:3 etc
      o primeiro como informei é o id do produto, depois a quantidade e o segundo produto depois da vírgula, isso seria já um array, mas quero saber como posso listar este pedido com seus ids e respectivas quantidades já que o array ficaria assim: Array ( [0] => 100:5 [1] => 101:8 [2] => 105:3 )
      Não consegui saber como quebrar novamente o array para referenciar id e quantidade...alguém tem uma luz aí?
       
      aguardo e obrigado
    • Por MrCharset
      Boa noite a todos. Olhem, por favor, este trecho de código:
       
      $("#E25").click(function()
              {
                  setTimeout(function()
                  {
                      document.getElementById("ter25").id = "t25";
                      document.getElementById("E25").style.display = "none";
                  }, 2000);
                  
                  $(".class").draggable
                  ({
                      containment: "#d1", connectToSortable: "#ter25"    
                  });
                  
                  $("#ter25").droppable
                  ({
                      hoverClass: "ter-ativo",
                      drop: function() 
                      {
                          push($(this).html());
                      }
                  });
              });
       
      Eu tenho um botão de id E25.
       
      Quando clico nele, divs membras da classe class (criatividade) tornam-se arrastáveis.
       
      Essas mesmas divs podem ser "droppadas" em outra div, de id ter25.
       
      Porém, preciso que apenas uma div da classe class seja "droppada" na ter25.
       
      Então, criei uma função que muda o id da ter25 para t25. Essa funçao é executada 2 segundos após o clique no botão E25.
       
      Assim, pensei eu, as divs da classe class não vão mais poder ser "droppadas". Mas me enganei. 
       
      Por quê?!!! O que determina a div droppable é seu id, e eu mudei seu id!
    • Por Mr.Heleno
      Tenho um form com textarea e input[text];
      <div class="div-row"> <p class="formulario-title-post"> <label for="cTitulo"></label> <input type="text" name="tTitle" id="cTitle" maxlength="60" placeholder="Título principal" required="required" autofocus/><a class="btn-close-form">&times;</a> </p> </div> Ao lado, botões com a função .append para adicionar novos textarea dinamicamente
      $(document).ready(function() { $(".appendP").click(function () { $(".caixas-form").append("<p><textarea placeholder='Parágrafo'></textarea><a class='btn-close-form'>&times;</a></p></div>"); }); }) Cada textarea ou input há um botão .remove para exclui-lo se necessário.
      $(function(){ $('a.btn-close-form').click(function(){ $(this).closest('.div-row').remove(); return false; }); }); Os inputs e textarea permanentes, funcionam normalmente o botão de excluir. Mas os inputs e textarea adicionados dinamicamente com o .append não são excluídos.
      Pq isso acontece? Onde está o erro?
       
       
      ----------------------------------------------------------------------
      Sou novo no desenvolvimento web. Esse form que estou fazendo é para um sistema de postagem. Existe algo mais simples para se fazer? Ou é isso mesmo?
      A ideia é, depois no PHP,  determinar pra onde vai os caracteres de cada input. Estou no caminho certo?
    • Por halfar
      eu tenho uma div que ao clicar nela  chama uma função através do jquery....
      bem, até aqui tudo bem, está tudo funcionando normal.
       
      no entanto, precisei mudar o layout, de formas que esta div teve que ficar dentro de outra div, ela ficou portanto aninhada a outra div,  e agora quando clico nela nada acontece.
       
      então o evento jquery que dispara o clique está assim:
       
      como esta div está dentro de outra div, será que eu não teria que fazer alguma referência a  div PAI??
      se for este o caso, como fazer??
    • Por agness
      na minha main tem isso aqui:
             Carta[ ] mao;
             mao = new Carta[3];
             mao[0].nome="fulano";
       
      alguma coisa na terceira linha faz dar erro, não consigo atribuir valor, será que declarei alguma coisa errada?
      acontece isso:

      OBS.: se eu declarar mao como não sendo um vetor, não dá erro