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 ment0r
      Bom dia amigos, tudo bem?
       
      Sou novo em POO e estou com algumas dificuldades.
      Tenho um método de uma classe que é bem simples, ele busca todos os campos da tabela USUARIO (Firebird 2.0) e retorna o array com elas. Só que a não consigo exibi-los com while.
       
      Sem o método eu faria:
      while($array = ibase_fetch_object($query)){ echo $array->ID; echo "<br>"; echo $array->ID; // E por aí vai... } public function selectAllUsers(){ $select = "select * from USUARIO"; $query = ibase_query($select); $array = ibase_fetch_object($query); return $array; } Só que com o array não consigo. Não sei como usar o while com esse array retornado.
       
      Por favor, se alguém puder me ajudar... serei grato.
      Um abraço a todos.
       
    • Por LucasOficial
      Me foi passado um trabalho de faculdade que consiste em:
      imagine um vetor inicialmente vazio com capacidade CAP.
      cria um programa que através de um menu permita o usuário
      inserir um novo numero
      remover um valor
      remover o elemento de uma determinada posição
      alteração de um valor por outro
      buscar determinado valor e dizer sua posição (caso exista)
      exibição de todos os elementos do vetor
       
      quero algumas ideias de como começar, quais funções, variáveis usar. sou bastante leigo nesse assunto.
    • Por uoston.bs
      Galera, bom dia! 
      Estou com um problema que acredito ser "simples", mas ainda não conseguir resolver.
      Desenvolvi uma aplicação simples em PHP que faz a contagem de refeições através de dados registrados em um txt, pego os dados do txt usando o substring para determinar o valor de cada coluna, o programa funciona até que bem, porém quando tenho alteração de DATA, mas com mesma faixa de horário ele não imprime a quantidade de refeição (seja ceia, café, almoço ou jantar).
      logo o que queria é que o programa além de fazer as impressões que já faz, imprimir também a quantidade de refeições quando a data for alterada, pois a contagem é feita por dia.
      Segue meu código completo abaixo:
      <?php set_time_limit(60); ?> <?php require_once('conexao/conectar.php'); ?> <?php date_default_timezone_set('America/Sao_Paulo'); ?> <?php header("Content-Type: text/html; charset=ISO-8859-1",true) ; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="shortcut icon" href="icone/icone.ico" type="image/x-icon" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <title>Index</title> <style> </head> <style> .titulo{     background: linear-gradient(#3555a2, #3555a2);       background: -moz-linear-gradient(#3555a2, #3555a2);       background: -ms-linear-gradient(#3555a2, #3555a2);       background: -o-linear-gradient(#3555a2, #3555a2);       background: -webkit-linear-gradient(#3555a2, #3555a2);       background-color: #57944d;     color: #FFF;       box-shadow: #57944d 0 0 15px;       border-top: 2px solid #3555a2;       border-bottom: 2px solid #3555a2;       -moz-border-radius:4px;     -webkit-border-radius:4px;     border-radius:4px;     font-family:Tahoma, Geneva, sans-serif; } .lista{     background: linear-gradient(#3555a2, #3555a2);       background: -moz-linear-gradient(#3555a2, #3555a2);       background: -ms-linear-gradient(#3555a2, #3555a2);       background: -o-linear-gradient(#3555a2, #3555a2);       background: -webkit-linear-gradient(#3555a2, #3555a2);       background-color: #57944d;     color: #FFF;       box-shadow: #57944d 0 0 15px;       border-top: 2px solid #3555a2;       border-bottom: 2px solid #3555a2;       -moz-border-radius:4px;     -webkit-border-radius:4px;     border-radius:4px;     font-family:Tahoma, Geneva, sans-serif; } </style> <style> .a{     text-decoretion: underline;     color: #FFF; } .a:hover{     color: #CD2626; } #preloader {     position: absolute;     left: 0px;     right: 0px;     bottom: 0px;     top: 0px;     background: #ccc; } </style> <body> <?php $count = 0; if (!function_exists("GetSQLValueString")) { function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")  {   if (PHP_VERSION < 6) {     $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;   }   $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);   switch ($theType) {     case "text":       $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";       break;         case "long":     case "int":       $theValue = ($theValue != "") ? intval($theValue) : "NULL";       break;     case "double":       $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";       break;     case "date":       $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";       break;     case "defined":       $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;       break;   }   return $theValue; } $contador = 0; $data_inicial = $_POST['inicial']; $data_final = $_POST['final']; $empresa = $_POST['tipo']; //$data_teste = date("d/m/Y"); $data_arquivoin = $_POST['inicial']; $data_arquivofi = $_POST['final']; $quebra =  chr(13).chr(10); $escrever = "Empresa INDU. REUN. * RAYMUNDO DA FONTE *".PHP_EOL; $area = "Relatorio: $empresa".PHP_EOL; $cabecalho = "Relatorio $empresa de $data_arquivoin a $data_arquivofi $quebra"; $titulos = "$quebra Data          Hora       Cartao            Colaborador           $quebra "; $formatacao = "----------------------------------------------------------------- $quebra $quebra"; $normal = fopen("Relatorios/Relatorio $empresa de $data_inicial a $data_final.txt", "w"); $texto1 = fwrite($normal, $escrever); $texto2 = fwrite($normal, $area); $texto3 = fwrite($normal, $cabecalho); $texto4 = fwrite($normal, $titulos); $texto5 = fwrite($normal, $formatacao); //Variaveis para determinar qual o tipo da refeição que foi realizada. $cafe_inicial = '05'; $cafe_final = '08'; $almoco_inicial = '11'; $almoco_final = '14'; $jantar_inicial = '18'; $jantar_final = '20'; $ceia_inicial = '00'; $ceia_final = '02'; //Variaveis para calculo de refeição diaria $cont_cafe = 0; $cont_almoco = 0; $cont_jantar = 0; $cont_ceia = 0; $cont_cresauto = 0; $cont_asa = 0; $cont_ws = 0; $cont_nbs = 0; $cont_total = 0; $cont_pm = 0; $cont_only = 0; $cont_helna = 0; $cont_wjm = 0; $arquivo = "Relatorios/Relatorio $empresa de $data_inicial a $data_final.txt";     $ponteiro = '//192.168.4.39//Portaria//bilhetes-p.txt';     $abrir = fopen($ponteiro, 'r');     $total_linhas = 0;             if(file_exists($ponteiro)){                              do{                                      $conteudo = fgets($abrir, 3500);                 $cartao = substr($conteudo, 27, -5);                 $data = substr($conteudo, 4, 10);                 $hora = substr($conteudo, 15, -25);                 $hora_cont = substr($conteudo, 15, -22);                                                                                        $query_row = mysql_query("SELECT nome, cartao, empresa FROM catracas WHERE cartao = '$cartao'");             $row = ($query_row)or die(mysql_error());             $row_row = mysql_fetch_assoc($row);             $totalRows_row = mysql_num_rows($row);                                      $colaborador = $row_row['nome'];                          $data_mod = str_replace("/", "-", $data);                 //echo "<br>$empresa<br>";                                           if($empresa == 'Brilux'){                                                    if(strtotime($data_mod) >= strtotime($data_inicial) and strtotime($data_mod) <= strtotime($data_final)){                          if($cartao == $row_row['cartao']){                                 $cont_total = $cont_total + 1;                     if($hora > $ceia_final and $cont_ceia > 1){                         $dados = fwrite($normal, "$quebra Total Ceia ----------->>>>> $cont_ceia $quebra $quebra");                         $cont_ceia = 0;                     }                                                  if($hora > $cafe_final and $cont_cafe > 1){                         $dados = fwrite($normal, "$quebra Total Cafe ----------->>>>> $cont_cafe $quebra $quebra");                         $cont_cafe = 0;                     }                                              if($hora > $almoco_final and $cont_almoco> 1){                         $dados = fwrite($normal, "$quebra Total Almoco ----------->>>>> $cont_almoco $quebra $quebra");                         $cont_almoco = 0;                     }                                              if($hora == $ceia_inicial and $cont_jantar > 1){                         $dados = fwrite($normal, "$quebra Total Jantar ----------->>>>> $cont_jantar $quebra $quebra");                         $cont_jantar = 0;                     }                                                                                                        if($hora >= $ceia_inicial and $hora <= $ceia_final){                         $cont_ceia = $cont_ceia +1;                     }                                          if($hora >= $cafe_inicial and $hora <= $cafe_final){                         $cont_cafe = $cont_cafe +1;                     }                                          if($hora >= $almoco_inicial and $hora <= $almoco_final){                         $cont_almoco = $cont_almoco+1;                     }                                          if($hora >= $jantar_inicial and $hora <= $jantar_final){                         $cont_jantar = $cont_jantar +1;                     }                                                               $dados = fwrite($normal, "$data  -  $hora_cont  -  $cartao  -  $colaborador $quebra");                                                                                }                                          }             }                          if($empresa == 'cresauto'){                 if(strtotime($data_mod) >= strtotime($data_inicial) and strtotime($data_mod) <= strtotime($data_final)){                     if($cartao == $row_row['cartao'] and $row_row['empresa']=='Cresauto'){                         $dados = fwrite($normal, "$data  -  $hora_cont  -  $cartao  -  $colaborador $quebra");                         $cont_cresauto = $cont_cresauto +1;                         }                 }             }                          if($empresa == 'asa'){                 if(strtotime($data_mod) >= strtotime($data_inicial) and strtotime($data_mod) <= strtotime($data_final)){                     if($cartao == $row_row['cartao'] and $row_row['empresa']=='Asa de Prata'){                         $dados = fwrite($normal, "$data  -  $hora_cont  -  $cartao  -  $colaborador $quebra");                         $cont_asa = $cont_asa +1;                         }                 }             }                          if($empresa == 'ws'){                 if(strtotime($data_mod) >= strtotime($data_inicial) and strtotime($data_mod) <= strtotime($data_final)){                     if($cartao == $row_row['cartao'] and $row_row['empresa']=='WS'){                         $dados = fwrite($normal, "$data  -  $hora_cont  -  $cartao  -  $colaborador $quebra");                         $cont_ws = $cont_ws +1;                         }                 }             }                          if($empresa == 'nbs'){                 if(strtotime($data_mod) >= strtotime($data_inicial) and strtotime($data_mod) <= strtotime($data_final)){                     if($cartao == $row_row['cartao'] and $row_row['empresa']=='NBS'){                         $dados = fwrite($normal, "$data  -  $hora_cont  -  $cartao  -  $colaborador $quebra");                         $cont_nbs = $cont_nbs +1;                         }                 }             }                          if($empresa == 'pm'){                 if(strtotime($data_mod) >= strtotime($data_inicial) and strtotime($data_mod) <= strtotime($data_final)){                     if($cartao == $row_row['cartao'] and $row_row['empresa']=='PM'){                         $dados = fwrite($normal, "$data  -  $hora_cont  -  $cartao  -  $colaborador $quebra");                         $cont_pm = $cont_pm +1;                         }                 }             }                          if($empresa == 'only'){                 if(strtotime($data_mod) >= strtotime($data_inicial) and strtotime($data_mod) <= strtotime($data_final)){                     if($cartao == $row_row['cartao'] and $row_row['empresa']=='ONLY'){                         $dados = fwrite($normal, "$data  -  $hora_cont  -  $cartao  -  $colaborador $quebra");                         $cont_only = $cont_only +1;                         }                 }             }                          if($empresa == 'helena'){                 if(strtotime($data_mod) >= strtotime($data_inicial) and strtotime($data_mod) <= strtotime($data_final)){                     if($cartao == $row_row['cartao'] and $row_row['empresa']=='MARIA HELENA'){                         $dados = fwrite($normal, "$data  -  $hora_cont  -  $cartao  -  $colaborador $quebra");                         $cont_helena = $cont_helena +1;                         }                 }             }                          if($empresa == 'wjm'){                 if(strtotime($data_mod) >= strtotime($data_inicial) and strtotime($data_mod) <= strtotime($data_final)){                     if($cartao == $row_row['cartao'] and $row_row['empresa']=='WJM'){                         $dados = fwrite($normal, "$data  -  $hora_cont  -  $cartao  -  $colaborador $quebra");                         $cont_wjm = $cont_wjm +1;                         }                 }             }                               }while(!feof($abrir)); }             if($empresa == 'cresauto'){                 $dados = fwrite($normal, "$quebra $quebra Total de Refeições ----> $cont_cresauto");             }                              if($empresa == 'asa'){                 $dados = fwrite($normal, "$quebra $quebra Total de Refeições ----> $cont_asa");             }                          if($empresa == 'Brilux'){                 $dados = fwrite($normal, "$quebra $quebra Total de Refeicoes ----> $cont_total");                              }                          if($empresa == 'ws'){                 $dados = fwrite($normal, "$quebra $quebra Total de Refeicoes ----> $cont_ws");                              }                          if($empresa == 'nbs'){                 $dados = fwrite($normal, "$quebra $quebra Total de Refeicoes ----> $cont_nbs");                              }                          if($empresa == 'pm'){                 $dados = fwrite($normal, "$quebra $quebra Total de Refeicoes ----> $cont_pm");                              }                          //$apaga_frequencia = mysql_query ("DELETE FROM frequencia");             //$pega = ($apaga_frequencia)or die(mysql_error());                                  }else{                 echo "arquivo não encontrado";         }                      //echo $data;         fclose($abrir);         fclose($normal);                            ?> <br><br> <p align="center">Relatório Gerado com Sucesso</p> <p align="center"><a href="<?php echo $arquivo ?>" download>Baixar Arquivo.</a></p> </script> </body> </html>  
    • Por gersonab
      boa tarde.
      tenho um código que funciona perfeitamente, é um formulário onde eu posso inserir 1 cadastro ou mais, tenho o adicionar linhas e ou excluir, porém gostaria de colocar dois inputs com valores pré definidos, porém só esta ficando o valor na primeira linha, ao adicionar outra, este vem em branco.
      tipo:
      <div class="span2">Origem :</div> <div class="span2"> <input type="text" name="origem[]" value="Volta Redonda" /> </div> <div class="span2">Clube :</div> <div class="span2"> <input name="clube[]" type="text" value="CCCBVR" /> </div> como proceder de forma correta ?
    • Por alecram28
      Boa tarde. Tenho o seguinte exercício para fazer em Java:
      Escreva um algoritmo para jogo lotérico. O usuário deve informar sua aposta através de 5 números inteiros no intervalo de 1 a 100. No servidor, os números da aposta devem ser armazenados em um vetor. O vetor da aposta não pode conter números repetidos. O algoritmo deve realizar o sorteio, gerando 5 números aleatoriamente no intervalo de 1 a 100. Os números sorteados também devem ser armazenados em um vetor. O vetor do sorteio não pode conter números repetidos. Se o usuário acertar menos de 3 números, ele ganha 0% da premiação. Se o usuário acertar 3 números, ele ganha 50% da premiação. Se o usuário acertar 4 números, ele ganha 75% da premiação. Se o usuário acertar os 5 números, ele ganha 100% da premiação. Na interface, o algoritmo deve
      informar:
      a. O valor da premiação.
      b. O vetor da aposta.
      c. O vetor do sorteio.
      d. O valor do prêmio recebido pelo usuário.
       
      Gostaria de ajuda para como posso verificar os valores iguais entre os vetores (verificar se a pessoa acertou algum numero)
      Obrigado!
       
       
       
       
       
       
       
×

Informação importante

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