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

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 manolegal
      Olá amigos. Estou tentando há bastante tempo, porém não estou conseguindo resolver meu problema.
      Estou recebendo do BD os valores de uma variável da seguinte forma:
      while ($linha = pg_fetch_array($Resultado)) { $variavel = $linha["dados_do_bd"]; } Está retornando o seguinte:
      var_dump($variavel); string '{"Texto_1","Texto_2"}' (length=...) string '{NULL}' (length=6) Preciso mostrar os dados da seguinte forma:
      Texto_1, Texto_2.
       
      Tentei de várias maneiras, porém sem sucesso.
      Se alguém puder dar alguma dica, agradeço.
      Obrigado. Aguardo retorno.
       
       
    • Por victortobias
      Bom dia a todos!
      Eu sou novato em PHP e estou tendo um pouquinho de dificuldade pra salvar as informações na sessão, até então na teoria era para ele pegar o post anterior e salvar na array 30x ja tentei com array_push e também fiz um manual, mas nenhum dos dois salva, ele só salva o último e fica substituindo as 30x o que pode ser, será que tem algo no meu código resetando a contagem?
      Desde já agradeço!
      Segue o código abaixo:
       
      <?php session_start(); //verifica se o paciente foi selecionado, caso não ele retornara $paciente = $_SESSION['paciente']; $terapeuta = $_SESSION['terapeuta']; //if (!isset($paciente) or !isset($terapeuta)){ // header("Location: iniciaexame.php"); // }else{ $actionform = "#"; //VERIFICAÇÃO DE REFRESH NA PÁGINA / ELE ZERA O TESTE CASO ACONTEÇA if (isset($_POST['questao'])){ $_SESSION['pergunta[$numper]'] = $_POST['questao']; $numper = $_SESSION['numper']; }else{ $numper = -1; } $verifica = $_SESSION['pergunta[$numper]']; $_SESSION['pergunta'] = array(); if (!isset($numper)){ $numper = -1; } else{ }; if ($numper <30){ $numper++; print_r($pergunta[$numper]); } else{ $actionform ="exame2.php"; } // sequencia da array 0 1 2 3 4 5 // sequencia exame1(5x) = a i u s ch m if ($numper == 0 or $numper == 6 or $numper == 12 or $numper == 18 or $numper == 24){ $audio = "audio/ex1a.mp3"; } elseif ($numper == 1 or $numper == 7 or $numper == 13 or $numper == 19 or $numper == 25){ $audio = "audio/ex1i.mp3"; } elseif ($numper == 2 or $numper == 8 or $numper == 14 or $numper == 20 or $numper == 26){ $audio = "audio/ex1u.mp3"; } elseif ($numper == 3 or $numper == 9 or $numper == 15 or $numper == 21 or $numper == 27){ $audio = "audio/ex1s.mp3"; } elseif ($numper == 4 or $numper == 10 or $numper == 16 or $numper == 22 or $numper == 28){ $audio = "audio/ex1ch.mp3"; } else{ $audio = "audio/ex1m.mp3"; } //} //finaliza a verificação do paciente e terapeuta $_SESSION['numper'] = $numper; ?> <html> <head> <title>Etapa 1 - Percep&ccedil;&atilde;o</title> </head> <body> <center> <h1>Voc&ecirc; ouviu?</h1><br><br> <form id="ex1" name=ex1 method="POST" action="<?php echo $actionform?>"> <input type="image" name="questao" src="img/like.png" value="1" onclick="document.ex1.submit();" /> <input type="image" name="questao" src="img/unlike.png" value="0" onclick="document.ex1.submit();" /> <br> <?php echo "Questao numero:".$numper; echo "Resposta:".$verifica; ?> </form> <!-- Player com Autoplay, deverá ter wait no audio --> <audio id="audioex1" autoplay> <source src="<?php echo $audio; ?>" type="audio/mp3"> Parece que o seu navegador não suporta o audio, tente utilizar o <a href="https://www.google.com.br/chrome/browser/desktop/index.html">Google Chrome</a> ou o <a href="https://www.mozilla.org/pt-BR/firefox/new/">Firefox</a> </audio> <h3><?php echo $audio; ?> </center> </body> </html>  
    • Por Luiz Carlos Ferreira
      Como faço para dar echo apenas em produtos deste PHP.
      Os tokens são provisorios.
       
      <?php
      $curl = curl_init();
      curl_setopt_array($curl, array(
        CURLOPT_URL => "https://app.squidfacil.com.br/api/products?page=1",
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_ENCODING => "",
        CURLOPT_MAXREDIRS => 10,
        CURLOPT_TIMEOUT => 30,
        CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
        CURLOPT_CUSTOMREQUEST => "GET",
        CURLOPT_HTTPHEADER => array(
          "Authorization: Bearer cf674082c2ad47915d15d86373f1258a521e5fc1",
          "Cache-Control: no-cache",
          "Postman-Token: c4ede18c-737a-41cb-5f40-b69d66a429a8"
        ),
      ));
      $response = curl_exec($curl);
      $err = curl_error($curl);
      curl_close($curl);
      if ($err) {
        echo "cURL Error #:" . $err;
      } else {
          
      echo $response;
          
          
      }
    • Por JVmendes
      Olá pessoal, preciso colocar o valor de um arquivo em uma Array, mas nao sei criar array dinâmico nem quantas linhas o arquivo terá.
      O Conteudo do Array usarei pra comparações depois.
    • Por BrunoBit
      Fala rapaziada, estou com uma duvida, como faço pra pegar um array de um formulário via javascript?
      Eu editei um exemplo aqui, porém ele não funciona não, vejam:
      <!DOCTYPE html> <html> <head> <script> function validateForm() { var x = document.forms["myForm"]["fname"][0].value; alert(x); } </script> </head> <body> <form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post"> Name1: <input type="text" name="fname[]"> Name2: <input type="text" name="fname[]"> <input type="submit" value="Submit"> </form> </body> </html> Outro pergunta, é possível pegar um array dessa forma aí no exemplo sem utilizar o form?
       
      Desde já agradeço rapaziada. abração e fiquem com Deus.
×

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: